wimui 0.59.0 → 0.60.1

package/dist/components/_internal/useInlineFloating.cjs

@@ -0,0 +1,2 @@
+"use client";
+let e=require("react");var t=typeof window<`u`?e.useLayoutEffect:e.useEffect,n=10,r=8,i=`--wim-floating-shift-x`,a=e=>{let t=e.viewportHeight-e.referenceBottom,n=e.referenceTop;return e.floatingHeight+r>t&&n>t?`top`:`bottom`},o=(e,t,r)=>{if(t>r){let i=r-n-t;return e+i<0?-e:i}if(e<0){let i=n-e;return t+i>r?r-t:i}return 0},s=({open:n})=>{let[r,s]=(0,e.useState)(null),[c,l]=(0,e.useState)(null),[u,d]=(0,e.useState)({side:`bottom`,shiftX:0}),f=(0,e.useCallback)(()=>{if(!r||!c)return;let e=c.ownerDocument.documentElement,t=r.getBoundingClientRect(),n=c.getBoundingClientRect(),s=a({referenceTop:t.top,referenceBottom:t.bottom,floatingHeight:n.height,viewportHeight:e.clientHeight}),l=parseFloat(c.style.getPropertyValue(i))||0,u=Math.round(o(n.left-l,n.right-l,e.clientWidth));d(e=>e.side===s&&e.shiftX===u?e:{side:s,shiftX:u})},[r,c]);t(()=>{if(!n||!r||!c)return;f();let e=c.ownerDocument.defaultView;if(!e)return;e.addEventListener(`resize`,f),e.addEventListener(`scroll`,f,!0);let t=typeof ResizeObserver<`u`?new ResizeObserver(f):null;return t?.observe(c),t?.observe(r),()=>{e.removeEventListener(`resize`,f),e.removeEventListener(`scroll`,f,!0),t?.disconnect()}},[n,r,c,f]);let p=n?u.side:`bottom`,m=n?u.shiftX:0;return{setReference:s,setFloating:l,floatingProps:{"data-side":p,style:m?{[i]:`${m}px`}:void 0}}};exports.computeInlineShift=o,exports.computeInlineSide=a,exports.useInlineFloating=s;

package/dist/components/_internal/useInlineFloating.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+export type InlineFloatingSide = "top" | "bottom";
+/**
+ * 面を、引き金の下と上のどちらに開くか。
+ *
+ * 既定は下。下に収まらず、上のほうが広いときだけ上へ返す ── どちらにも収まらないときは、広いほう。
+ */
+export declare const computeInlineSide: (input: {
+    referenceTop: number;
+    referenceBottom: number;
+    floatingHeight: number;
+    viewportHeight: number;
+}) => InlineFloatingSide;
+/**
+ * 面を、横に何 px 寄せるか。`left` / `right` は、**寄せる前の**面の位置（画面の左端から）。
+ *
+ * **はみ出しているときだけ動かす。** 画面に収まっている面は、端から 10px 以内でも触らない ──
+ * 余白なしで端まで置いた入力欄（狭い画面の全幅の Select など）の面を、引き金からずらさないため。
+ * はみ出していたら、端から 10px 内側へ寄せる。寄せた結果、反対側がはみ出すなら（面が画面より
+ * 広い）、反対側の端で止める。
+ */
+export declare const computeInlineShift: (left: number, right: number, viewportWidth: number) => number;
+export interface InlineFloatingOptions {
+    /** 面が開いているか。閉じているあいだは測らない。 */
+    open: boolean;
+}
+/**
+ * 引き金の隣に描く面（Select のリストなど）の、向きと横のずれを決める（T342）。
+ *
+ * ポータルへ出す部品（Tooltip / Popover / Dropdown）は `useFloatingElement`（floating-ui）が位置を
+ * 計算するが、こちらは**面の位置を CSS が決めたままにする**。返すのは「どちら側に開くか」と「横に
+ * 何 px ずらすか」だけで、部品はそれを `data-side` と CSS 変数で受ける。
+ *
+ * こうする理由は 3 つ:
+ * - 面をポータルへ出さない（ユーザー判断）。Tab の順と、面の中のフォーカスの扱いを変えない
+ * - 既定の向きの見た目を 1px も動かさない。位置を inline style で上書きすると、いまの CSS の間隔
+ *   （トークン・密度に追従する）と揃わなくなる
+ * - floating-ui を読まない。入力系がこれを読むと、フォーム画面の束が 22 kB の予算に対して 29.9 kB に
+ *   なった（+7.9 kB。2026-10-11 に実測）。向きと横のずれは、矩形を 2 つ測れば決まる
+ *
+ * 見るのは画面（ビューポート）だけ。スクロールしない入れ物（`overflow: hidden`）による切り取りは
+ * 見ない ── 面をポータルへ出さない以上、向きを変えても切り取りは解けないので。
+ */
+export declare const useInlineFloating: ({ open }: InlineFloatingOptions) => {
+    /** 引き金（位置の基準）に渡す ref。 */
+    setReference: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    /** 面に渡す ref。 */
+    setFloating: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    /** 面に付ける属性と CSS 変数。 */
+    floatingProps: {
+        "data-side": InlineFloatingSide;
+        style: React.CSSProperties | undefined;
+    };
+};

package/dist/components/_internal/useInlineFloating.js

@@ -0,0 +1,61 @@
+"use client";
+import { useCallback as e, useEffect as t, useLayoutEffect as n, useState as r } from "react";
+//#region src/components/_internal/useInlineFloating.ts
+var i = typeof window < "u" ? n : t, a = 10, o = 8, s = "--wim-floating-shift-x", c = (e) => {
+	let t = e.viewportHeight - e.referenceBottom, n = e.referenceTop;
+	return e.floatingHeight + o > t && n > t ? "top" : "bottom";
+}, l = (e, t, n) => {
+	if (t > n) {
+		let r = n - a - t;
+		return e + r < 0 ? -e : r;
+	}
+	if (e < 0) {
+		let r = a - e;
+		return t + r > n ? n - t : r;
+	}
+	return 0;
+}, u = ({ open: t }) => {
+	let [n, a] = r(null), [o, u] = r(null), [d, f] = r({
+		side: "bottom",
+		shiftX: 0
+	}), p = e(() => {
+		if (!n || !o) return;
+		let e = o.ownerDocument.documentElement, t = n.getBoundingClientRect(), r = o.getBoundingClientRect(), i = c({
+			referenceTop: t.top,
+			referenceBottom: t.bottom,
+			floatingHeight: r.height,
+			viewportHeight: e.clientHeight
+		}), a = parseFloat(o.style.getPropertyValue(s)) || 0, u = Math.round(l(r.left - a, r.right - a, e.clientWidth));
+		f((e) => e.side === i && e.shiftX === u ? e : {
+			side: i,
+			shiftX: u
+		});
+	}, [n, o]);
+	i(() => {
+		if (!t || !n || !o) return;
+		p();
+		let e = o.ownerDocument.defaultView;
+		if (!e) return;
+		e.addEventListener("resize", p), e.addEventListener("scroll", p, !0);
+		let r = typeof ResizeObserver < "u" ? new ResizeObserver(p) : null;
+		return r?.observe(o), r?.observe(n), () => {
+			e.removeEventListener("resize", p), e.removeEventListener("scroll", p, !0), r?.disconnect();
+		};
+	}, [
+		t,
+		n,
+		o,
+		p
+	]);
+	let m = t ? d.side : "bottom", h = t ? d.shiftX : 0;
+	return {
+		setReference: a,
+		setFloating: u,
+		floatingProps: {
+			"data-side": m,
+			style: h ? { [s]: `${h}px` } : void 0
+		}
+	};
+};
+//#endregion
+export { l as computeInlineShift, c as computeInlineSide, u as useInlineFloating };

package/dist/components/ai/ModelSelector/ModelSelector.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../layout/Transition/Transition.cjs"),i=require("../../../icon/check.cjs"),a=require("../../../icon/chevron-down.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("./model-selector.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=e=>e>=1e6?`${(e/1e6).toFixed(e%1e6==0?0:1)}M`:e>=1e3?`${(e/1e3).toFixed(e%1e3==0?0:1)}K`:String(e),f=(e,t=`$`)=>`${t}${e}`,p=c.default.forwardRef(({models:e,value:p,defaultValue:m,onChange:h,size:g=`md`,disabled:_=!1,fullWidth:v=!1,showPricing:y=!0,showContext:b=!0,labels:x,className:S,...C},w)=>{let{t:T}=t.useWimTranslation(n.commonNs),{placeholder:E=T(`modelSelector.placeholder`),contextLabel:D=T(`modelSelector.context`),inputLabel:O=T(`modelSelector.input`),outputLabel:k=T(`modelSelector.output`),perTokensLabel:A=`/1M`,triggerAriaLabel:j=T(`modelSelector.placeholder`)}=x??{},M=p!==void 0,[N,P]=(0,c.useState)(m),F=M?p:N,I=e.find(e=>e.id===F),[L,R]=(0,c.useState)(!1),[z,B]=(0,c.useState)(-1),V=(0,c.useRef)(null),H=(0,c.useRef)(null),U=(0,c.useId)(),W=`${U}-listbox`,G=(0,c.useCallback)(e=>{V.current=e,typeof w==`function`?w(e):w&&(w.current=e)},[w]);(0,c.useEffect)(()=>{if(!L)return;let e=e=>{V.current&&!V.current.contains(e.target)&&R(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[L]);let K=e=>{e.disabled||(M||P(e.id),h?.(e.id,e),R(!1))},q=(t,n)=>{let r=t;for(let t=0;t<e.length;t++){if(!e[r]?.disabled)return r;r=(r+n+e.length)%e.length}return-1},J=t=>{let n=e.findIndex(e=>e.id===F);B(t??(n>=0?n:q(0,1))),R(!0)},Y=t=>{B(n=>{let r=n;for(let n=0;n<e.length&&(r=(r+t+e.length)%e.length,e[r]?.disabled);n++);return r})},X=t=>{if(!_)switch(t.key){case`ArrowDown`:case`ArrowUp`:t.preventDefault(),L?Y(t.key===`ArrowDown`?1:-1):J();break;case`Home`:case`End`:t.preventDefault(),t.key===`Home`?L?B(q(0,1)):J(q(0,1)):L?B(q(e.length-1,-1)):J(q(e.length-1,-1));break;case`Enter`:case` `:if(t.preventDefault(),!L)J();else{let t=e[z];t&&K(t)}break;case`Escape`:L&&(t.preventDefault(),R(!1));break;case`Tab`:R(!1)}};(0,c.useEffect)(()=>{L&&z>=0&&(H.current?.querySelectorAll(`[role="option"]`)?.[z])?.scrollIntoView({block:`nearest`})},[z,L]);let Z=e=>{let t=[];if(b&&e.contextLength&&t.push((0,u.jsxs)(`span`,{className:s.default.meta,children:[D,` `,d(e.contextLength)]},`ctx`)),y&&e.pricing){let{input:n,output:r,currency:i}=e.pricing;n!==void 0&&t.push((0,u.jsxs)(`span`,{className:s.default.meta,children:[O,` `,f(n,i),A]},`in`)),r!==void 0&&t.push((0,u.jsxs)(`span`,{className:s.default.meta,children:[k,` `,f(r,i),A]},`out`))}if(t.length===0)return null;let n=t.flatMap((e,t)=>t===0?[e]:[` `,e]);return(0,u.jsx)(`span`,{className:s.default.metaRow,children:n})};return(0,u.jsxs)(`div`,{ref:G,className:(0,l.default)(`wim-model-selector`,s.default.root,s.default[g],v&&s.default.fullWidth,_&&s.default.disabled,S),...C,children:[(0,u.jsxs)(`button`,{type:`button`,role:`combobox`,className:s.default.trigger,"aria-haspopup":`listbox`,"aria-expanded":L,"aria-controls":L?W:void 0,"aria-activedescendant":L&&z>=0?`${U}-opt-${z}`:void 0,"aria-label":j,disabled:_,onClick:()=>{_||(L?R(!1):J())},onKeyDown:X,onKeyUp:e=>{e.key===` `&&e.preventDefault()},children:[(0,u.jsx)(`span`,{className:s.default.triggerLabel,children:I?(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`span`,{className:s.default.triggerName,children:I.name}),` `,I.badge&&(0,u.jsx)(`span`,{className:s.default.badge,children:I.badge})]}):(0,u.jsx)(`span`,{className:s.default.placeholder,children:E})}),(0,u.jsx)(o.Icon,{component:a.default,size:`sm`,className:(0,l.default)(s.default.chevron,L&&s.default.chevronOpen)})]}),(0,u.jsx)(r.Transition,{show:L,preset:`scale`,unmount:!0,className:s.default.dropdownWrapper,children:(0,u.jsx)(`ul`,{ref:H,id:W,role:`listbox`,"aria-label":j,tabIndex:-1,className:s.default.dropdown,onMouseDown:e=>e.preventDefault(),children:e.map((e,t)=>{let n=e.id===F;return(0,u.jsxs)(`li`,{id:`${U}-opt-${t}`,role:`option`,"aria-selected":n,"aria-disabled":e.disabled||void 0,className:(0,l.default)(s.default.option,t===z&&s.default.active,e.disabled&&s.default.optionDisabled),onMouseEnter:()=>B(t),onClick:()=>K(e),children:[(0,u.jsx)(`span`,{className:s.default.check,"aria-hidden":`true`,children:n&&(0,u.jsx)(o.Icon,{component:i.default,size:`sm`})}),(0,u.jsxs)(`span`,{className:s.default.optionBody,children:[(0,u.jsxs)(`span`,{className:s.default.optionHeader,children:[(0,u.jsx)(`span`,{className:s.default.optionName,children:e.name}),` `,e.badge&&(0,u.jsx)(`span`,{className:s.default.badge,children:e.badge})]}),` `,e.description&&(0,u.jsx)(`span`,{className:s.default.description,children:e.description}),` `,Z(e)]})]},e.id)})})})]})});p.displayName=`ModelSelector`,exports.ModelSelector=p;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../../hooks/useMergedRef.cjs"),i=require("../../layout/Transition/Transition.cjs"),a=require("../../../icon/check.cjs"),o=require("../../../icon/chevron-down.cjs"),s=require("../../media/Icon/Icon.cjs"),c=require("../../_internal/useInlineFloating.cjs"),l=require("./model-selector.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=e=>e>=1e6?`${(e/1e6).toFixed(e%1e6==0?0:1)}M`:e>=1e3?`${(e/1e3).toFixed(e%1e3==0?0:1)}K`:String(e),m=(e,t=`$`)=>`${t}${e}`,h=u.default.forwardRef(({models:e,value:h,defaultValue:g,onChange:_,size:v=`md`,disabled:y=!1,fullWidth:b=!1,showPricing:x=!0,showContext:S=!0,labels:C,className:w,...T},E)=>{let{t:D}=t.useWimTranslation(n.commonNs),{placeholder:O=D(`modelSelector.placeholder`),contextLabel:k=D(`modelSelector.context`),inputLabel:A=D(`modelSelector.input`),outputLabel:j=D(`modelSelector.output`),perTokensLabel:M=`/1M`,triggerAriaLabel:N=D(`modelSelector.placeholder`)}=C??{},P=h!==void 0,[F,I]=(0,u.useState)(g),L=P?h:F,R=e.find(e=>e.id===L),[z,B]=(0,u.useState)(!1),[V,H]=(0,u.useState)(-1),U=(0,u.useRef)(null),W=(0,u.useRef)(null),G=(0,u.useId)(),K=`${G}-listbox`,q=(0,u.useCallback)(e=>{U.current=e,typeof E==`function`?E(e):E&&(E.current=e)},[E]);(0,u.useEffect)(()=>{if(!z)return;let e=e=>{U.current&&!U.current.contains(e.target)&&B(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[z]);let J=e=>{e.disabled||(P||I(e.id),_?.(e.id,e),B(!1))},Y=(t,n)=>{let r=t;for(let t=0;t<e.length;t++){if(!e[r]?.disabled)return r;r=(r+n+e.length)%e.length}return-1},X=t=>{let n=e.findIndex(e=>e.id===L);H(t??(n>=0?n:Y(0,1))),B(!0)},Z=t=>{H(n=>{let r=n;for(let n=0;n<e.length&&(r=(r+t+e.length)%e.length,e[r]?.disabled);n++);return r})},Q=t=>{if(!y)switch(t.key){case`ArrowDown`:case`ArrowUp`:t.preventDefault(),z?Z(t.key===`ArrowDown`?1:-1):X();break;case`Home`:case`End`:t.preventDefault(),t.key===`Home`?z?H(Y(0,1)):X(Y(0,1)):z?H(Y(e.length-1,-1)):X(Y(e.length-1,-1));break;case`Enter`:case` `:if(t.preventDefault(),!z)X();else{let t=e[V];t&&J(t)}break;case`Escape`:z&&(t.preventDefault(),B(!1));break;case`Tab`:B(!1)}};(0,u.useEffect)(()=>{z&&V>=0&&(W.current?.querySelectorAll(`[role="option"]`)?.[V])?.scrollIntoView({block:`nearest`})},[V,z]);let $=e=>{let t=[];if(S&&e.contextLength&&t.push((0,f.jsxs)(`span`,{className:l.default.meta,children:[k,` `,p(e.contextLength)]},`ctx`)),x&&e.pricing){let{input:n,output:r,currency:i}=e.pricing;n!==void 0&&t.push((0,f.jsxs)(`span`,{className:l.default.meta,children:[A,` `,m(n,i),M]},`in`)),r!==void 0&&t.push((0,f.jsxs)(`span`,{className:l.default.meta,children:[j,` `,m(r,i),M]},`out`))}if(t.length===0)return null;let n=t.flatMap((e,t)=>t===0?[e]:[` `,e]);return(0,f.jsx)(`span`,{className:l.default.metaRow,children:n})},{setReference:ee,setFloating:te,floatingProps:ne}=c.useInlineFloating({open:z}),re=r.useMergedRef(q,ee);return(0,f.jsxs)(`div`,{ref:re,className:(0,d.default)(`wim-model-selector`,l.default.root,l.default[v],b&&l.default.fullWidth,y&&l.default.disabled,w),...T,children:[(0,f.jsxs)(`button`,{type:`button`,role:`combobox`,className:l.default.trigger,"aria-haspopup":`listbox`,"aria-expanded":z,"aria-controls":z?K:void 0,"aria-activedescendant":z&&V>=0?`${G}-opt-${V}`:void 0,"aria-label":N,disabled:y,onClick:()=>{y||(z?B(!1):X())},onKeyDown:Q,onKeyUp:e=>{e.key===` `&&e.preventDefault()},children:[(0,f.jsx)(`span`,{className:l.default.triggerLabel,children:R?(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(`span`,{className:l.default.triggerName,children:R.name}),` `,R.badge&&(0,f.jsx)(`span`,{className:l.default.badge,children:R.badge})]}):(0,f.jsx)(`span`,{className:l.default.placeholder,children:O})}),(0,f.jsx)(s.Icon,{component:o.default,size:`sm`,className:(0,d.default)(l.default.chevron,z&&l.default.chevronOpen)})]}),(0,f.jsx)(i.Transition,{show:z,preset:`scale`,unmount:!0,className:l.default.dropdownWrapper,ref:te,...ne,children:(0,f.jsx)(`ul`,{ref:W,id:K,role:`listbox`,"aria-label":N,tabIndex:-1,className:l.default.dropdown,onMouseDown:e=>e.preventDefault(),children:e.map((e,t)=>{let n=e.id===L;return(0,f.jsxs)(`li`,{id:`${G}-opt-${t}`,role:`option`,"aria-selected":n,"aria-disabled":e.disabled||void 0,className:(0,d.default)(l.default.option,t===V&&l.default.active,e.disabled&&l.default.optionDisabled),onMouseEnter:()=>H(t),onClick:()=>J(e),children:[(0,f.jsx)(`span`,{className:l.default.check,"aria-hidden":`true`,children:n&&(0,f.jsx)(s.Icon,{component:a.default,size:`sm`})}),(0,f.jsxs)(`span`,{className:l.default.optionBody,children:[(0,f.jsxs)(`span`,{className:l.default.optionHeader,children:[(0,f.jsx)(`span`,{className:l.default.optionName,children:e.name}),` `,e.badge&&(0,f.jsx)(`span`,{className:l.default.badge,children:e.badge})]}),` `,e.description&&(0,f.jsx)(`span`,{className:l.default.description,children:e.description}),` `,$(e)]})]},e.id)})})})]})});h.displayName=`ModelSelector`,exports.ModelSelector=h;

package/dist/components/ai/ModelSelector/ModelSelector.js

@@ -1,20 +1,22 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
 import { commonNs as t } from "../../../i18n/generated/common.js";
-import { Transition as n } from "../../layout/Transition/Transition.js";
-import r from "../../../icon/check.js";
-import i from "../../../icon/chevron-down.js";
-import { Icon as a } from "../../media/Icon/Icon.js";
-import o from "./model-selector.module.js";
-import s, { useCallback as c, useEffect as l, useId as u, useRef as d, useState as f } from "react";
-import p from "classnames";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useMergedRef as n } from "../../../hooks/useMergedRef.js";
+import { Transition as r } from "../../layout/Transition/Transition.js";
+import i from "../../../icon/check.js";
+import a from "../../../icon/chevron-down.js";
+import { Icon as o } from "../../media/Icon/Icon.js";
+import { useInlineFloating as s } from "../../_internal/useInlineFloating.js";
+import c from "./model-selector.module.js";
+import l, { useCallback as u, useEffect as d, useId as ee, useRef as f, useState as p } from "react";
+import m from "classnames";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/ai/ModelSelector/ModelSelector.tsx
-var _ = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(e % 1e6 == 0 ? 0 : 1)}M` : e >= 1e3 ? `${(e / 1e3).toFixed(e % 1e3 == 0 ? 0 : 1)}K` : String(e), v = (e, t = "$") => `${t}${e}`, y = s.forwardRef(({ models: s, value: y, defaultValue: b, onChange: x, size: S = "md", disabled: C = !1, fullWidth: w = !1, showPricing: T = !0, showContext: E = !0, labels: D, className: ee, ...O }, k) => {
-	let { t: A } = e(t), { placeholder: j = A("modelSelector.placeholder"), contextLabel: M = A("modelSelector.context"), inputLabel: N = A("modelSelector.input"), outputLabel: P = A("modelSelector.output"), perTokensLabel: F = "/1M", triggerAriaLabel: I = A("modelSelector.placeholder") } = D ?? {}, L = y !== void 0, [R, z] = f(b), B = L ? y : R, V = s.find((e) => e.id === B), [H, U] = f(!1), [W, G] = f(-1), K = d(null), q = d(null), J = u(), Y = `${J}-listbox`, X = c((e) => {
-		K.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
-	}, [k]);
-	l(() => {
+var v = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(e % 1e6 == 0 ? 0 : 1)}M` : e >= 1e3 ? `${(e / 1e3).toFixed(e % 1e3 == 0 ? 0 : 1)}K` : String(e), y = (e, t = "$") => `${t}${e}`, b = l.forwardRef(({ models: l, value: b, defaultValue: x, onChange: S, size: te = "md", disabled: C = !1, fullWidth: w = !1, showPricing: T = !0, showContext: E = !0, labels: D, className: O, ...k }, A) => {
+	let { t: j } = e(t), { placeholder: M = j("modelSelector.placeholder"), contextLabel: N = j("modelSelector.context"), inputLabel: ne = j("modelSelector.input"), outputLabel: P = j("modelSelector.output"), perTokensLabel: F = "/1M", triggerAriaLabel: I = j("modelSelector.placeholder") } = D ?? {}, L = b !== void 0, [R, z] = p(x), B = L ? b : R, V = l.find((e) => e.id === B), [H, U] = p(!1), [W, G] = p(-1), K = f(null), q = f(null), J = ee(), Y = `${J}-listbox`, X = u((e) => {
+		K.current = e, typeof A == "function" ? A(e) : A && (A.current = e);
+	}, [A]);
+	d(() => {
 		if (!H) return;
 		let e = (e) => {
 			K.current && !K.current.contains(e.target) && U(!1);
@@ -22,38 +24,38 @@ var _ = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(e % 1e6 == 0 ? 0 : 1)}M` : e >= 1
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, [H]);
 	let Z = (e) => {
-		e.disabled || (L || z(e.id), x?.(e.id, e), U(!1));
+		e.disabled || (L || z(e.id), S?.(e.id, e), U(!1));
 	}, Q = (e, t) => {
 		let n = e;
-		for (let e = 0; e < s.length; e++) {
-			if (!s[n]?.disabled) return n;
-			n = (n + t + s.length) % s.length;
+		for (let e = 0; e < l.length; e++) {
+			if (!l[n]?.disabled) return n;
+			n = (n + t + l.length) % l.length;
 		}
 		return -1;
 	}, $ = (e) => {
-		let t = s.findIndex((e) => e.id === B);
+		let t = l.findIndex((e) => e.id === B);
 		G(e ?? (t >= 0 ? t : Q(0, 1))), U(!0);
-	}, te = (e) => {
+	}, re = (e) => {
 		G((t) => {
 			let n = t;
-			for (let t = 0; t < s.length && (n = (n + e + s.length) % s.length, s[n]?.disabled); t++);
+			for (let t = 0; t < l.length && (n = (n + e + l.length) % l.length, l[n]?.disabled); t++);
 			return n;
 		});
-	}, ne = (e) => {
+	}, ie = (e) => {
 		if (!C) switch (e.key) {
 			case "ArrowDown":
 			case "ArrowUp":
-				e.preventDefault(), H ? te(e.key === "ArrowDown" ? 1 : -1) : $();
+				e.preventDefault(), H ? re(e.key === "ArrowDown" ? 1 : -1) : $();
 				break;
 			case "Home":
 			case "End":
-				e.preventDefault(), e.key === "Home" ? H ? G(Q(0, 1)) : $(Q(0, 1)) : H ? G(Q(s.length - 1, -1)) : $(Q(s.length - 1, -1));
+				e.preventDefault(), e.key === "Home" ? H ? G(Q(0, 1)) : $(Q(0, 1)) : H ? G(Q(l.length - 1, -1)) : $(Q(l.length - 1, -1));
 				break;
 			case "Enter":
 			case " ":
 				if (e.preventDefault(), !H) $();
 				else {
-					let e = s[W];
+					let e = l[W];
 					e && Z(e);
 				}
 				break;
@@ -63,53 +65,53 @@ var _ = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(e % 1e6 == 0 ? 0 : 1)}M` : e >= 1
 			case "Tab": U(!1);
 		}
 	};
-	l(() => {
+	d(() => {
 		H && W >= 0 && (q.current?.querySelectorAll("[role=\"option\"]")?.[W])?.scrollIntoView({ block: "nearest" });
 	}, [W, H]);
-	let re = (e) => {
+	let ae = (e) => {
 		let t = [];
-		if (E && e.contextLength && t.push(/* @__PURE__ */ g("span", {
-			className: o.meta,
+		if (E && e.contextLength && t.push(/* @__PURE__ */ _("span", {
+			className: c.meta,
 			children: [
-				M,
+				N,
 				" ",
-				_(e.contextLength)
+				v(e.contextLength)
 			]
 		}, "ctx")), T && e.pricing) {
 			let { input: n, output: r, currency: i } = e.pricing;
-			n !== void 0 && t.push(/* @__PURE__ */ g("span", {
-				className: o.meta,
+			n !== void 0 && t.push(/* @__PURE__ */ _("span", {
+				className: c.meta,
 				children: [
-					N,
+					ne,
 					" ",
-					v(n, i),
+					y(n, i),
 					F
 				]
-			}, "in")), r !== void 0 && t.push(/* @__PURE__ */ g("span", {
-				className: o.meta,
+			}, "in")), r !== void 0 && t.push(/* @__PURE__ */ _("span", {
+				className: c.meta,
 				children: [
 					P,
 					" ",
-					v(r, i),
+					y(r, i),
 					F
 				]
 			}, "out"));
 		}
 		if (t.length === 0) return null;
 		let n = t.flatMap((e, t) => t === 0 ? [e] : [" ", e]);
-		return /* @__PURE__ */ h("span", {
-			className: o.metaRow,
+		return /* @__PURE__ */ g("span", {
+			className: c.metaRow,
 			children: n
 		});
-	};
-	return /* @__PURE__ */ g("div", {
-		ref: X,
-		className: p("wim-model-selector", o.root, o[S], w && o.fullWidth, C && o.disabled, ee),
-		...O,
-		children: [/* @__PURE__ */ g("button", {
+	}, { setReference: oe, setFloating: se, floatingProps: ce } = s({ open: H }), le = n(X, oe);
+	return /* @__PURE__ */ _("div", {
+		ref: le,
+		className: m("wim-model-selector", c.root, c[te], w && c.fullWidth, C && c.disabled, O),
+		...k,
+		children: [/* @__PURE__ */ _("button", {
 			type: "button",
 			role: "combobox",
-			className: o.trigger,
+			className: c.trigger,
 			"aria-haspopup": "listbox",
 			"aria-expanded": H,
 			"aria-controls": H ? Y : void 0,
@@ -119,85 +121,87 @@ var _ = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(e % 1e6 == 0 ? 0 : 1)}M` : e >= 1
 			onClick: () => {
 				C || (H ? U(!1) : $());
 			},
-			onKeyDown: ne,
+			onKeyDown: ie,
 			onKeyUp: (e) => {
 				e.key === " " && e.preventDefault();
 			},
-			children: [/* @__PURE__ */ h("span", {
-				className: o.triggerLabel,
-				children: V ? /* @__PURE__ */ g(m, { children: [
-					/* @__PURE__ */ h("span", {
-						className: o.triggerName,
+			children: [/* @__PURE__ */ g("span", {
+				className: c.triggerLabel,
+				children: V ? /* @__PURE__ */ _(h, { children: [
+					/* @__PURE__ */ g("span", {
+						className: c.triggerName,
 						children: V.name
 					}),
 					" ",
-					V.badge && /* @__PURE__ */ h("span", {
-						className: o.badge,
+					V.badge && /* @__PURE__ */ g("span", {
+						className: c.badge,
 						children: V.badge
 					})
-				] }) : /* @__PURE__ */ h("span", {
-					className: o.placeholder,
-					children: j
+				] }) : /* @__PURE__ */ g("span", {
+					className: c.placeholder,
+					children: M
 				})
-			}), /* @__PURE__ */ h(a, {
-				component: i,
+			}), /* @__PURE__ */ g(o, {
+				component: a,
 				size: "sm",
-				className: p(o.chevron, H && o.chevronOpen)
+				className: m(c.chevron, H && c.chevronOpen)
 			})]
-		}), /* @__PURE__ */ h(n, {
+		}), /* @__PURE__ */ g(r, {
 			show: H,
 			preset: "scale",
 			unmount: !0,
-			className: o.dropdownWrapper,
-			children: /* @__PURE__ */ h("ul", {
+			className: c.dropdownWrapper,
+			ref: se,
+			...ce,
+			children: /* @__PURE__ */ g("ul", {
 				ref: q,
 				id: Y,
 				role: "listbox",
 				"aria-label": I,
 				tabIndex: -1,
-				className: o.dropdown,
+				className: c.dropdown,
 				onMouseDown: (e) => e.preventDefault(),
-				children: s.map((e, t) => {
+				children: l.map((e, t) => {
 					let n = e.id === B;
-					return /* @__PURE__ */ g("li", {
+					return /* @__PURE__ */ _("li", {
 						id: `${J}-opt-${t}`,
 						role: "option",
 						"aria-selected": n,
 						"aria-disabled": e.disabled || void 0,
-						className: p(o.option, t === W && o.active, e.disabled && o.optionDisabled),
+						className: m(c.option, t === W && c.active, e.disabled && c.optionDisabled),
 						onMouseEnter: () => G(t),
 						onClick: () => Z(e),
-						children: [/* @__PURE__ */ h("span", {
-							className: o.check,
+						children: [/* @__PURE__ */ g("span", {
+							className: c.check,
 							"aria-hidden": "true",
-							children: n && /* @__PURE__ */ h(a, {
-								component: r,
+							children: n && /* @__PURE__ */ g(o, {
+								component: i,
 								size: "sm"
 							})
-						}), /* @__PURE__ */ g("span", {
-							className: o.optionBody,
+						}), /* @__PURE__ */ _("span", {
+							className: c.optionBody,
 							children: [
-								/* @__PURE__ */ g("span", {
-									className: o.optionHeader,
+								/* @__PURE__ */ _("span", {
+									className: c.optionHeader,
 									children: [
-										/* @__PURE__ */ h("span", {
-											className: o.optionName,
+										/* @__PURE__ */ g("span", {
+											className: c.optionName,
 											children: e.name
 										}),
 										" ",
-										e.badge && /* @__PURE__ */ h("span", {
-											className: o.badge,
+										e.badge && /* @__PURE__ */ g("span", {
+											className: c.badge,
 											children: e.badge
 										})
 									]
 								}),
 								" ",
-								e.description && /* @__PURE__ */ h("span", {
-									className: o.description,
+								e.description && /* @__PURE__ */ g("span", {
+									className: c.description,
 									children: e.description
 								}),
 								" ",
-								re(e)
+								ae(e)
 							]
 						})]
 					}, e.id);
@@ -206,6 +210,6 @@ var _ = (e) => e >= 1e6 ? `${(e / 1e6).toFixed(e % 1e6 == 0 ? 0 : 1)}M` : e >= 1
 		})]
 	});
 });
-y.displayName = "ModelSelector";
+b.displayName = "ModelSelector";
 //#endregion
-export { y as ModelSelector };
+export { b as ModelSelector };

package/dist/components/ai/ModelSelector/model-selector.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1tnvx_24`,t=`_fullWidth_1tnvx_36`,n=`_disabled_1tnvx_39`,r=`_trigger_1tnvx_43`,i=`_triggerLabel_1tnvx_94`,a=`_triggerName_1tnvx_101`,o=`_placeholder_1tnvx_107`,s=`_chevron_1tnvx_113`,c=`_chevronOpen_1tnvx_118`,l=`_badge_1tnvx_121`,u=`_dropdownWrapper_1tnvx_131`,d=`_dropdown_1tnvx_131`,f=`_option_1tnvx_153`,p=`_optionDisabled_1tnvx_161`,m=`_active_1tnvx_164`,h=`_check_1tnvx_171`,g=`_optionBody_1tnvx_180`,_=`_optionHeader_1tnvx_186`,v=`_optionName_1tnvx_191`,y=`_description_1tnvx_199`,b=`_metaRow_1tnvx_203`,x=`_meta_1tnvx_203`,S=`_sm_1tnvx_221`,C=`_lg_1tnvx_226`,w={root:e,fullWidth:t,disabled:n,trigger:r,triggerLabel:i,triggerName:a,placeholder:o,chevron:s,chevronOpen:c,badge:l,dropdownWrapper:u,dropdown:d,option:f,optionDisabled:p,active:m,check:h,optionBody:g,optionHeader:_,optionName:v,description:y,metaRow:b,meta:x,sm:S,lg:C};exports.active=m,exports.badge=l,exports.check=h,exports.chevron=s,exports.chevronOpen=c,exports.default=w,exports.description=y,exports.disabled=n,exports.dropdown=d,exports.dropdownWrapper=u,exports.fullWidth=t,exports.lg=C,exports.meta=x,exports.metaRow=b,exports.option=f,exports.optionBody=g,exports.optionDisabled=p,exports.optionHeader=_,exports.optionName=v,exports.placeholder=o,exports.root=e,exports.sm=S,exports.trigger=r,exports.triggerLabel=i,exports.triggerName=a;
+var e=`_root_6cl4w_24`,t=`_fullWidth_6cl4w_36`,n=`_disabled_6cl4w_39`,r=`_trigger_6cl4w_43`,i=`_triggerLabel_6cl4w_94`,a=`_triggerName_6cl4w_101`,o=`_placeholder_6cl4w_107`,s=`_chevron_6cl4w_113`,c=`_chevronOpen_6cl4w_118`,l=`_badge_6cl4w_121`,u=`_dropdownWrapper_6cl4w_131`,d=`_dropdown_6cl4w_131`,f=`_option_6cl4w_161`,p=`_optionDisabled_6cl4w_169`,m=`_active_6cl4w_172`,h=`_check_6cl4w_179`,g=`_optionBody_6cl4w_188`,_=`_optionHeader_6cl4w_194`,v=`_optionName_6cl4w_199`,y=`_description_6cl4w_207`,b=`_metaRow_6cl4w_211`,x=`_meta_6cl4w_211`,S=`_sm_6cl4w_229`,C=`_lg_6cl4w_234`,w={root:e,fullWidth:t,disabled:n,trigger:r,triggerLabel:i,triggerName:a,placeholder:o,chevron:s,chevronOpen:c,badge:l,dropdownWrapper:u,dropdown:d,option:f,optionDisabled:p,active:m,check:h,optionBody:g,optionHeader:_,optionName:v,description:y,metaRow:b,meta:x,sm:S,lg:C};exports.active=m,exports.badge=l,exports.check=h,exports.chevron=s,exports.chevronOpen=c,exports.default=w,exports.description=y,exports.disabled=n,exports.dropdown=d,exports.dropdownWrapper=u,exports.fullWidth=t,exports.lg=C,exports.meta=x,exports.metaRow=b,exports.option=f,exports.optionBody=g,exports.optionDisabled=p,exports.optionHeader=_,exports.optionName=v,exports.placeholder=o,exports.root=e,exports.sm=S,exports.trigger=r,exports.triggerLabel=i,exports.triggerName=a;

package/dist/components/ai/ModelSelector/model-selector.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/ai/ModelSelector/model-selector.module.scss
-var e = "_root_1tnvx_24", t = "_fullWidth_1tnvx_36", n = "_disabled_1tnvx_39", r = "_trigger_1tnvx_43", i = "_triggerLabel_1tnvx_94", a = "_triggerName_1tnvx_101", o = "_placeholder_1tnvx_107", s = "_chevron_1tnvx_113", c = "_chevronOpen_1tnvx_118", l = "_badge_1tnvx_121", u = "_dropdownWrapper_1tnvx_131", d = "_dropdown_1tnvx_131", f = "_option_1tnvx_153", p = "_optionDisabled_1tnvx_161", m = "_active_1tnvx_164", h = "_check_1tnvx_171", g = "_optionBody_1tnvx_180", _ = "_optionHeader_1tnvx_186", v = "_optionName_1tnvx_191", y = "_description_1tnvx_199", b = "_metaRow_1tnvx_203", x = "_meta_1tnvx_203", S = "_sm_1tnvx_221", C = "_lg_1tnvx_226", w = {
+var e = "_root_6cl4w_24", t = "_fullWidth_6cl4w_36", n = "_disabled_6cl4w_39", r = "_trigger_6cl4w_43", i = "_triggerLabel_6cl4w_94", a = "_triggerName_6cl4w_101", o = "_placeholder_6cl4w_107", s = "_chevron_6cl4w_113", c = "_chevronOpen_6cl4w_118", l = "_badge_6cl4w_121", u = "_dropdownWrapper_6cl4w_131", d = "_dropdown_6cl4w_131", f = "_option_6cl4w_161", p = "_optionDisabled_6cl4w_169", m = "_active_6cl4w_172", h = "_check_6cl4w_179", g = "_optionBody_6cl4w_188", _ = "_optionHeader_6cl4w_194", v = "_optionName_6cl4w_199", y = "_description_6cl4w_207", b = "_metaRow_6cl4w_211", x = "_meta_6cl4w_211", S = "_sm_6cl4w_229", C = "_lg_6cl4w_234", w = {
 	root: e,
 	fullWidth: t,
 	disabled: n,

package/dist/components/ai/SourceCitation/SourceCitation.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/external-link.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("./source-citation.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");function l(e){try{return new URL(e).hostname.replace(/^www\./,``)}catch{return e}}var u=({title:e,url:o,description:u,index:d,domain:f,className:p})=>{let{t:m}=t.useWimTranslation(i.formNs),h=f??(o?l(o):void 0),g=d==null?e:m(`source_citation.source_label`,{index:d}),_=(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(`div`,{className:a.default.header,children:[d!=null&&(0,c.jsx)(`span`,{className:a.default.index,"aria-hidden":`true`,children:d}),(0,c.jsx)(`span`,{className:a.default.title,children:e}),o&&(0,c.jsx)(r.Icon,{component:n.default,size:`xs`,className:a.default.externalIcon,"aria-hidden":`true`})]}),h&&(0,c.jsx)(`div`,{className:a.default.domain,children:h}),u&&(0,c.jsx)(`p`,{className:a.default.description,children:u})]});return o?(0,c.jsx)(`a`,{href:o,target:`_blank`,rel:`noopener noreferrer`,className:(0,s.default)(`wim-source-citation`,a.default.root,a.default.link,p),"aria-label":g,children:_}):(0,c.jsx)(`div`,{className:(0,s.default)(`wim-source-citation`,a.default.root,p),role:`group`,"aria-label":g,children:_})},d=o.default.forwardRef(({sources:e,className:t,...n},r)=>(0,c.jsx)(`div`,{ref:r,className:(0,s.default)(a.default.list,t),...n,children:e.map((e,t)=>(0,c.jsx)(u,{index:t+1,...e},e.url??e.title))}));d.displayName=`SourceCitationList`,exports.SourceCitation=u,exports.SourceCitationList=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/external-link.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("./source-citation.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");function l(e){try{return new URL(e).hostname.replace(/^www\./,``)}catch{return e}}var u=({title:e,url:o,description:u,index:d,domain:f,className:p,"aria-label":m,"aria-labelledby":h})=>{let{t:g}=t.useWimTranslation(i.formNs),_=f??(o?l(o):void 0),v=d==null?e:g(`source_citation.source_label`,{index:d}),y=h?void 0:m??v,b=(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(`div`,{className:a.default.header,children:[d!=null&&(0,c.jsx)(`span`,{className:a.default.index,"aria-hidden":`true`,children:d}),(0,c.jsx)(`span`,{className:a.default.title,children:e}),o&&(0,c.jsx)(r.Icon,{component:n.default,size:`xs`,className:a.default.externalIcon,"aria-hidden":`true`})]}),_&&(0,c.jsx)(`div`,{className:a.default.domain,children:_}),u&&(0,c.jsx)(`p`,{className:a.default.description,children:u})]});return o?(0,c.jsx)(`a`,{href:o,target:`_blank`,rel:`noopener noreferrer`,className:(0,s.default)(`wim-source-citation`,a.default.root,a.default.link,p),"aria-label":y,"aria-labelledby":h,children:b}):(0,c.jsx)(`div`,{className:(0,s.default)(`wim-source-citation`,a.default.root,p),role:`group`,"aria-label":y,"aria-labelledby":h,children:b})},d=o.default.forwardRef(({sources:e,className:t,...n},r)=>(0,c.jsx)(`div`,{ref:r,className:(0,s.default)(a.default.list,t),...n,children:e.map((e,t)=>(0,c.jsx)(u,{index:t+1,...e},e.url??e.title))}));d.displayName=`SourceCitationList`,exports.SourceCitation=u,exports.SourceCitationList=d;

package/dist/components/ai/SourceCitation/SourceCitation.d.ts

@@ -12,6 +12,10 @@ export interface SourceCitationProps {
     domain?: string;
     /** Additional CSS class */
     className?: string;
+    /** Accessible name for the citation. */
+    "aria-label"?: string;
+    /** ID of the element that labels the citation. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
 }
 /**
  * SourceCitation displays a single cited source with optional link, index badge, and description.
@@ -21,7 +25,7 @@ export interface SourceCitationProps {
  * - Managed by: App consumption
  * - Scroll lock: No
  */
-export declare const SourceCitation: ({ title, url, description, index, domain: domainProp, className, }: SourceCitationProps) => React.JSX.Element;
+export declare const SourceCitation: ({ title, url, description, index, domain: domainProp, className, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: SourceCitationProps) => React.JSX.Element;
 export interface SourceCitationListProps extends React.ComponentPropsWithoutRef<"div"> {
     /** Array of sources to display */
     sources: SourceCitationProps[];

package/dist/components/ai/SourceCitation/SourceCitation.js

@@ -15,8 +15,8 @@ function u(e) {
 		return e;
 	}
 }
-var d = ({ title: a, url: d, description: f, index: p, domain: m, className: h }) => {
-	let { t: g } = e(r), _ = m ?? (d ? u(d) : void 0), v = p == null ? a : g("source_citation.source_label", { index: p }), y = /* @__PURE__ */ l(s, { children: [
+var d = ({ title: a, url: d, description: f, index: p, domain: m, className: h, "aria-label": g, "aria-labelledby": _ }) => {
+	let { t: v } = e(r), y = m ?? (d ? u(d) : void 0), b = p == null ? a : v("source_citation.source_label", { index: p }), x = _ ? void 0 : g ?? b, S = /* @__PURE__ */ l(s, { children: [
 		/* @__PURE__ */ l("div", {
 			className: i.header,
 			children: [
@@ -37,9 +37,9 @@ var d = ({ title: a, url: d, description: f, index: p, domain: m, className: h }
 				})
 			]
 		}),
-		_ && /* @__PURE__ */ c("div", {
+		y && /* @__PURE__ */ c("div", {
 			className: i.domain,
-			children: _
+			children: y
 		}),
 		f && /* @__PURE__ */ c("p", {
 			className: i.description,
@@ -51,13 +51,15 @@ var d = ({ title: a, url: d, description: f, index: p, domain: m, className: h }
 		target: "_blank",
 		rel: "noopener noreferrer",
 		className: o("wim-source-citation", i.root, i.link, h),
-		"aria-label": v,
-		children: y
+		"aria-label": x,
+		"aria-labelledby": _,
+		children: S
 	}) : /* @__PURE__ */ c("div", {
 		className: o("wim-source-citation", i.root, h),
 		role: "group",
-		"aria-label": v,
-		children: y
+		"aria-label": x,
+		"aria-labelledby": _,
+		children: S
 	});
 }, f = a.forwardRef(({ sources: e, className: t, ...n }, r) => /* @__PURE__ */ c("div", {
 	ref: r,

package/dist/components/data-display/DataGrid/DataGrid.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../form/Checkbox/Checkbox.cjs"),i=require("../../navigation/Pagination/Pagination.cjs"),a=require("../Table/Table.cjs"),o=require("./useFixedColumns.cjs"),s=require("./useDataGridKeyboard.cjs"),c=require("./useInfiniteScroll.cjs"),l=require("./datagrid.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");function p({columns:e,data:p,rowKey:m=`id`,loading:h=!1,striped:g=!1,bordered:_=!1,hoverable:v=!0,stickyHeader:y=!0,height:b,maxHeight:x,emptyMessage:S,mobileCard:C=!1,selection:w,selectedRowKeys:T,onSelectionChange:E,sortConfig:D,onSortChange:O,pagination:k,infiniteScroll:A,className:j,ariaLabel:M}){let{t:N}=t.useWimTranslation(n.commonNs),P=h!==!1&&h!==void 0,F=h===!0||h===`blocking`,I=(0,u.useMemo)(()=>w?w===!0?{type:`checkbox`,selectedRowKeys:T??[],onChange:(e,t)=>{E?.(e,t)}}:w:null,[w,T,E]),{fixedLeftOffsets:L,fixedRightOffsets:R}=o.useFixedColumns(e,!!I),z=(e,t=!1)=>{let n=L[e];if(n)return{stickyLeft:!0,leftOffset:n.offset,stickyZIndex:t?1e3+n.zIndex:n.zIndex,className:(0,d.default)(l.default.cellFixed,n.isLast&&l.default.cellFixedLeftLast)};let r=R[e];return r?{stickyRight:!0,rightOffset:r.offset,stickyZIndex:t?1e3+r.zIndex:r.zIndex,className:(0,d.default)(l.default.cellFixed,r.isFirst&&l.default.cellFixedRightFirst)}:{}},B=(0,u.useCallback)(e=>typeof m==`function`?m(e):e[m],[m]),V=(0,u.useMemo)(()=>!I||p.length===0?!1:p.every(e=>I.selectedRowKeys.includes(B(e))),[p,I,B]),H=(0,u.useMemo)(()=>I?!V&&p.some(e=>I.selectedRowKeys.includes(B(e))):!1,[p,I,V,B]),U=e=>{if(!I)return;let t=e.target.checked,n=t?p.map(B):[],r=t?p:[];I.onChange(n,r)},W=(e,t)=>{if(!I)return;let n=t.target.checked,r=B(e),i=n?[...I.selectedRowKeys,r]:I.selectedRowKeys.filter(e=>e!==r),a=p.filter(e=>i.includes(B(e)));I.onChange(i,a)},{focusedCell:G,handleKeyDown:K,containerRef:q}=s.useDataGridKeyboard(e,p,!!I),{loaderRef:J}=c.useInfiniteScroll(A),Y=e.length+ +!!I;return(0,f.jsxs)(`div`,{className:(0,d.default)(`wim-data-grid`,l.default.root,F&&l.default.loading,C===`md`?l.default.mobileCardMd:C&&l.default.mobileCard,j),"aria-busy":P||void 0,children:[(0,f.jsxs)(`div`,{className:l.default.container,style:{height:b,maxHeight:x},inert:F||void 0,children:[(0,f.jsxs)(a.Table,{ref:q,onKeyDown:K,tabIndex:0,role:`grid`,"aria-label":M??N(`a11y.data_grid`),"aria-rowcount":p.length+1,"aria-colcount":Y,striped:g,bordered:_,hoverable:v,stickyHeader:y,mobileCard:C,fullWidth:!0,className:(0,d.default)(`wim-table`,l.default.table),containerClassName:l.default.tableContainer,children:[(0,f.jsx)(a.Table.Header,{children:(0,f.jsxs)(a.Table.Row,{children:[I&&(0,f.jsx)(a.Table.Head,{role:`columnheader`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:1150,"data-row":-1,"data-col":-1,"aria-label":N(`a11y.select_all_rows`),tabIndex:G.row===-1&&G.col===-1?0:-1,children:(I.type??`checkbox`)===`checkbox`&&(0,f.jsx)(r.Checkbox,{checked:V,indeterminate:H,onChange:U,"aria-label":N(`a11y.select_all_rows`)})}),e.map((e,t)=>{let n=z(e.key,!0);return(0,f.jsx)(a.Table.Head,{role:`columnheader`,style:{width:e.width,minWidth:e.width},sortable:!!(e.sortable&&O),sortDirection:D?.key===e.key?D.direction:`none`,onSort:()=>{if(!e.sortable||!O)return;let t=D?.key===e.key?D.direction===`asc`?`desc`:D.direction===`desc`?`none`:`asc`:`asc`;O(e.key,t)},...n,tabIndex:G.row===-1&&G.col===(I?t+1:t)?0:-1,"data-row":-1,"data-col":I?t+1:t,children:e.title},e.key)})]})}),(0,f.jsx)(a.Table.Body,{children:p.map((t,n)=>{let i=B(t),o=I?.selectedRowKeys.includes(i);return(0,f.jsxs)(a.Table.Row,{selected:o,children:[I&&(0,f.jsx)(a.Table.Cell,{role:`gridcell`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:150,"data-row":n,"data-col":-1,tabIndex:G.row===n&&G.col===-1?0:-1,children:(0,f.jsx)(r.Checkbox,{checked:o,onChange:e=>W(t,e),"aria-label":N(`a11y.select_row`)})}),e.map((e,r)=>{let i=z(e.key,!1),o=t[e.dataIndex??e.key];return(0,f.jsx)(a.Table.Cell,{role:`gridcell`,label:typeof e.title==`string`?e.title:void 0,...i,"data-row":n,"data-col":I?r+1:r,tabIndex:G.row===n&&G.col===(I?r+1:r)?0:-1,children:e.maxWidth==null?e.render?e.render(o,t,n):o:(0,f.jsx)(`div`,{style:{maxWidth:e.maxWidth},children:e.render?e.render(o,t,n):o})},e.key)})]},i)})})]}),p.length===0&&S&&(0,f.jsx)(`div`,{role:`status`,className:l.default.empty,children:S}),A?.hasMore&&(0,f.jsx)(`div`,{ref:J,className:l.default.loader,children:A.hasMore&&N(`dataGrid.loading_more`)})]}),k&&(0,f.jsxs)(`div`,{className:l.default.footer,inert:F||void 0,children:[(0,f.jsxs)(`div`,{className:l.default.info,children:[N(`dataGrid.displaying`,{shown:p.length,total:k.total}),I?.selectedRowKeys&&I.selectedRowKeys.length>0&&(0,f.jsx)(`span`,{className:l.default.selectionInfo,children:N(`dataGrid.rows_selected`,{selected:I.selectedRowKeys.length})})]}),(0,f.jsx)(`div`,{className:l.default.pagination,children:(0,f.jsx)(i.Pagination,{className:l.default.paginationContent,current:k.current,total:k.total,pageSize:k.pageSize,onChange:k.onChange})})]})]})}exports.DataGrid=p;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../form/Checkbox/Checkbox.cjs"),i=require("../../navigation/Pagination/Pagination.cjs"),a=require("../Table/Table.cjs"),o=require("./useFixedColumns.cjs"),s=require("./useDataGridKeyboard.cjs"),c=require("./useInfiniteScroll.cjs"),l=require("./datagrid.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");function p({columns:e,data:p,rowKey:m=`id`,loading:h=!1,striped:g=!1,bordered:_=!1,hoverable:v=!0,stickyHeader:y=!0,height:b,maxHeight:x,emptyMessage:S,mobileCard:C=!1,selection:w,selectedRowKeys:T,onSelectionChange:E,sortConfig:D,onSortChange:O,pagination:k,infiniteScroll:A,className:j,ariaLabel:M,"aria-label":N,"aria-labelledby":P}){let{t:F}=t.useWimTranslation(n.commonNs),I=h!==!1&&h!==void 0,L=h===!0||h===`blocking`,R=(0,u.useMemo)(()=>w?w===!0?{type:`checkbox`,selectedRowKeys:T??[],onChange:(e,t)=>{E?.(e,t)}}:w:null,[w,T,E]),{fixedLeftOffsets:z,fixedRightOffsets:B}=o.useFixedColumns(e,!!R),V=(e,t=!1)=>{let n=z[e];if(n)return{stickyLeft:!0,leftOffset:n.offset,stickyZIndex:t?1e3+n.zIndex:n.zIndex,className:(0,d.default)(l.default.cellFixed,n.isLast&&l.default.cellFixedLeftLast)};let r=B[e];return r?{stickyRight:!0,rightOffset:r.offset,stickyZIndex:t?1e3+r.zIndex:r.zIndex,className:(0,d.default)(l.default.cellFixed,r.isFirst&&l.default.cellFixedRightFirst)}:{}},H=(0,u.useCallback)(e=>typeof m==`function`?m(e):e[m],[m]),U=(0,u.useMemo)(()=>!R||p.length===0?!1:p.every(e=>R.selectedRowKeys.includes(H(e))),[p,R,H]),W=(0,u.useMemo)(()=>R?!U&&p.some(e=>R.selectedRowKeys.includes(H(e))):!1,[p,R,U,H]),G=e=>{if(!R)return;let t=e.target.checked,n=t?p.map(H):[],r=t?p:[];R.onChange(n,r)},K=(e,t)=>{if(!R)return;let n=t.target.checked,r=H(e),i=n?[...R.selectedRowKeys,r]:R.selectedRowKeys.filter(e=>e!==r),a=p.filter(e=>i.includes(H(e)));R.onChange(i,a)},{focusedCell:q,handleKeyDown:J,containerRef:Y}=s.useDataGridKeyboard(e,p,!!R),{loaderRef:X}=c.useInfiniteScroll(A),Z=e.length+ +!!R;return(0,f.jsxs)(`div`,{className:(0,d.default)(`wim-data-grid`,l.default.root,L&&l.default.loading,C===`md`?l.default.mobileCardMd:C&&l.default.mobileCard,j),"aria-busy":I||void 0,children:[(0,f.jsxs)(`div`,{className:l.default.container,style:{height:b,maxHeight:x},inert:L||void 0,children:[(0,f.jsxs)(a.Table,{ref:Y,onKeyDown:J,tabIndex:0,role:`grid`,"aria-label":P?void 0:N??M??F(`a11y.data_grid`),"aria-labelledby":P,"aria-rowcount":p.length+1,"aria-colcount":Z,striped:g,bordered:_,hoverable:v,stickyHeader:y,mobileCard:C,fullWidth:!0,className:(0,d.default)(`wim-table`,l.default.table),containerClassName:l.default.tableContainer,children:[(0,f.jsx)(a.Table.Header,{children:(0,f.jsxs)(a.Table.Row,{children:[R&&(0,f.jsx)(a.Table.Head,{role:`columnheader`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:1150,"data-row":-1,"data-col":-1,"aria-label":F(`a11y.select_all_rows`),tabIndex:q.row===-1&&q.col===-1?0:-1,children:(R.type??`checkbox`)===`checkbox`&&(0,f.jsx)(r.Checkbox,{checked:U,indeterminate:W,onChange:G,"aria-label":F(`a11y.select_all_rows`)})}),e.map((e,t)=>{let n=V(e.key,!0);return(0,f.jsx)(a.Table.Head,{role:`columnheader`,style:{width:e.width,minWidth:e.width},sortable:!!(e.sortable&&O),sortDirection:D?.key===e.key?D.direction:`none`,onSort:()=>{if(!e.sortable||!O)return;let t=D?.key===e.key?D.direction===`asc`?`desc`:D.direction===`desc`?`none`:`asc`:`asc`;O(e.key,t)},...n,tabIndex:q.row===-1&&q.col===(R?t+1:t)?0:-1,"data-row":-1,"data-col":R?t+1:t,children:e.title},e.key)})]})}),(0,f.jsx)(a.Table.Body,{children:p.map((t,n)=>{let i=H(t),o=R?.selectedRowKeys.includes(i);return(0,f.jsxs)(a.Table.Row,{selected:o,children:[R&&(0,f.jsx)(a.Table.Cell,{role:`gridcell`,selection:!0,stickyLeft:!0,leftOffset:0,stickyZIndex:150,"data-row":n,"data-col":-1,tabIndex:q.row===n&&q.col===-1?0:-1,children:(0,f.jsx)(r.Checkbox,{checked:o,onChange:e=>K(t,e),"aria-label":F(`a11y.select_row`)})}),e.map((e,r)=>{let i=V(e.key,!1),o=t[e.dataIndex??e.key];return(0,f.jsx)(a.Table.Cell,{role:`gridcell`,label:typeof e.title==`string`?e.title:void 0,...i,"data-row":n,"data-col":R?r+1:r,tabIndex:q.row===n&&q.col===(R?r+1:r)?0:-1,children:e.maxWidth==null?e.render?e.render(o,t,n):o:(0,f.jsx)(`div`,{style:{maxWidth:e.maxWidth},children:e.render?e.render(o,t,n):o})},e.key)})]},i)})})]}),p.length===0&&S&&(0,f.jsx)(`div`,{role:`status`,className:l.default.empty,children:S}),A?.hasMore&&(0,f.jsx)(`div`,{ref:X,className:l.default.loader,children:A.hasMore&&F(`dataGrid.loading_more`)})]}),k&&(0,f.jsxs)(`div`,{className:l.default.footer,inert:L||void 0,children:[(0,f.jsxs)(`div`,{className:l.default.info,children:[F(`dataGrid.displaying`,{shown:p.length,total:k.total}),R?.selectedRowKeys&&R.selectedRowKeys.length>0&&(0,f.jsx)(`span`,{className:l.default.selectionInfo,children:F(`dataGrid.rows_selected`,{selected:R.selectedRowKeys.length})})]}),(0,f.jsx)(`div`,{className:l.default.pagination,children:(0,f.jsx)(i.Pagination,{className:l.default.paginationContent,current:k.current,total:k.total,pageSize:k.pageSize,onChange:k.onChange})})]})]})}exports.DataGrid=p;

package/dist/components/data-display/DataGrid/DataGrid.d.ts

@@ -96,6 +96,10 @@ export type DataGridProps<T> = {
     className?: string;
     /** Accessibility label for the grid */
     ariaLabel?: string;
+    /** Accessible name for the grid. Takes precedence over `ariaLabel`. */
+    "aria-label"?: string;
+    /** ID of the element that labels the grid. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
 };
-export declare function DataGrid<T extends Record<string, unknown>>({ columns, data, rowKey, loading, striped, bordered, hoverable, stickyHeader, height, maxHeight, emptyMessage, mobileCard, selection: selectionProp, selectedRowKeys: propsSelectedRowKeys, onSelectionChange, sortConfig, onSortChange, pagination, infiniteScroll, className, ariaLabel, }: DataGridProps<T>): React.JSX.Element;
+export declare function DataGrid<T extends Record<string, unknown>>({ columns, data, rowKey, loading, striped, bordered, hoverable, stickyHeader, height, maxHeight, emptyMessage, mobileCard, selection: selectionProp, selectedRowKeys: propsSelectedRowKeys, onSelectionChange, sortConfig, onSortChange, pagination, infiniteScroll, className, ariaLabel, "aria-label": ariaLabelAttr, "aria-labelledby": ariaLabelledBy, }: DataGridProps<T>): React.JSX.Element;
 export {};