@infinityfx/fluid 1.4.14 → 1.4.16

package/dist/components/display/combobox/content.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as o,useState as t,useLayoutEffect as n,useMemo as i,Children as a,isValidElement as s,cloneElement as c}from"react";import l from"../../layout/popover/index.js";import d from"../../layout/scrollarea.js";import m from"../../input/field.js";import{Animatable as u}from"@infinityfx/lively";import{combineClasses as f,combineRefs as p,classes as h,getFocusable as g}from"../../../core/utils.js";import{createStyles as x}from"../../../core/style.js";import{usePopover as v}from"../../layout/popover/root.js";import{Icon as y}from"../../../core/icons.js";import"../../../context/fluid.js";import b from"../../../hooks/use-debounce.js";const _=x("combobox.content",{".container:not(.modal)":{background:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"calc(.25em + var(--f-radius-sml))",boxShadow:"var(--f-shadow-med)",minWidth:"min(100vw, 10em)",width:"100%"},".container.round":{borderRadius:"1.4em"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".content":{maxHeight:"9.5em"},".modal .content":{maxHeight:"50vh"},".message":{position:"relative",padding:".5em",width:"100%",textAlign:"center",color:"var(--f-clr-grey-500)",lineHeight:1.25},".container .field":{margin:".25em",marginBottom:0},".container .field__content":{paddingBlock:".5em"}});function w({children:x,cc:w={},round:j,size:z="med",autoFocus:k=!0,searchable:M=!1,placeholder:S="Search..",emptyMessage:C="Nothing found",virtualItemHeight:F=0,...H}){const N=f(_,w),{opened:A,trigger:B,content:D,isModal:T}=v(),K=o(0),L=o({list:[],index:k?0:-1}),[R,U]=t(""),[I,V]=t({start:0,end:1/0}),W=b((e=>{$(0),U(e)}),200);function $(e){if(!F||!D.current)return V({start:0,end:1/0});const r=Math.ceil(D.current.offsetHeight/F),o=Math.floor(r/2),t=o+Math.floor(e/(F*o))*o,n=Math.max(0,t-r),i=n+2*r;I.end!==i&&V({start:n,end:i})}n((()=>{A&&$(0)}),[A]);const q=i((()=>(K.current=0,a.map(x,(e=>{const r=s(e)&&("value"in e.props?e:e.props.children);if(!s(r)||!("value"in r.props))return e;if(!((""+r.props.value).toLowerCase()||"").includes(R))return null;const o=K.current++,t=o+(M?1:0);return o<I.start||o>I.end?null:c(e,{round:j,ref:p((e=>{L.current.list[t]=e}),e.props.ref),onFocus:e=>{L.current.index=t,H.onFocus?.(e)},autoFocus:t==L.current.index})})))),[x,I,R]);return e(l.Content,{children:e(u,{id:"combobox-options-outer",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r("div",{...H,role:"listbox",className:h(N.container,N[`s__${z}`],j&&N.round,T&&N.modal,H.className),onBlur:e=>{H.onBlur?.(e),L.current.index=-1},onKeyDown:e=>{if(H.onKeyDown?.(e),"Tab"!==e.key&&"ArrowDown"!==e.key&&"ArrowUp"!==e.key)return;const{index:r,list:o}=L.current,t="ArrowUp"===e.key||e.shiftKey?Math.max(r-1,-1):Math.min(r+1,o.length-1),n=t<0?g(B.current,!1):o[L.current.index=t];n?n.focus():L.current.index=0,(n||"Tab"!==e.key)&&e.preventDefault()},children:[M&&e(m,{round:j,size:z,variant:"minimal",placeholder:S,icon:e(y,{type:"search"}),inputRef:e=>L.current.list[0]=e,autoFocus:0==L.current.index,onFocus:()=>L.current.index=0,defaultValue:R,onChange:e=>W(e.target.value.toLowerCase()),cc:{...w,field:N.field,content:N.field__content}}),e(d,{className:N.content,onScroll:e=>$(e.currentTarget.scrollTop),children:r("div",{style:{padding:".25em",minHeight:F?F*K.current:void 0},children:[e("div",{style:{height:F*I.start}}),e(u,{id:"combobox-options-inner",inherit:!0,cachable:[],animate:{opacity:[0,1],scale:[.95,1],duration:.2},staggerLimit:4,stagger:.05,children:(!F||I.end!==1/0)&&q}),!K.current&&e("div",{className:N.message,children:C})]})})]})})})}w.displayName="Combobox.Content";export{w as default};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as o,useState as t,useLayoutEffect as n,useMemo as i,Children as a,isValidElement as s,cloneElement as c}from"react";import l from"../../layout/popover/index.js";import d from"../../layout/scrollarea.js";import u from"../../input/field.js";import{Animatable as m}from"@infinityfx/lively";import{combineClasses as f,combineRefs as p,classes as h,getFocusable as g}from"../../../core/utils.js";import{createStyles as x}from"../../../core/style.js";import{usePopover as v}from"../../layout/popover/root.js";import{Icon as y}from"../../../core/icons.js";import"../../../context/fluid.js";import b from"../../../hooks/use-debounce.js";const _=x("combobox.content",{".container:not(.modal)":{background:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"calc(.25em + var(--f-radius-sml))",boxShadow:"var(--f-shadow-med)",minWidth:"min(100vw, 10em)",width:"100%"},".container.round":{borderRadius:"1.4em"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".content":{maxHeight:"9.5em"},".modal .content":{maxHeight:"50vh"},".message":{position:"relative",padding:".5em",width:"100%",textAlign:"center",color:"var(--f-clr-grey-500)",lineHeight:1.25},".container .field":{margin:".25em",marginBottom:0},".container .field__content":{paddingBlock:".5em"}});function w({children:x,cc:w={},round:j,size:z="med",autoFocus:k=!0,searchable:M=!1,placeholder:S="Search..",emptyMessage:C="Nothing found",virtualItemHeight:F=0,...H}){const N=f(_,w),{opened:T,trigger:A,content:B,isModal:D}=v(),K=o(0),L=o({list:[],index:k?0:-1}),[R,U]=t(""),[I,P]=t({start:0,end:1/0}),V=b((e=>{W(0),U(e)}),200);function W(e){if(!F||!B.current)return P({start:0,end:1/0});const r=Math.ceil(B.current.offsetHeight/F),o=Math.floor(r/2),t=o+Math.floor(e/(F*o))*o,n=Math.max(0,t-r),i=n+2*r;I.end!==i&&P({start:n,end:i})}n((()=>{T&&W(0)}),[T]);const $=i((()=>(K.current=0,a.map(x,(e=>{const r=s(e)&&("value"in e.props?e:e.props.children);if(!s(r)||!("value"in r.props))return e;if(!((""+r.props.value).toLowerCase()||"").includes(R))return null;const o=K.current++,t=o+(M?1:0);return o<I.start||o>I.end?null:c(e,{round:j,ref:p((e=>{L.current.list[t]=e}),e.props.ref),onFocus:e=>{L.current.index=t,H.onFocus?.(e)},autoFocus:t==L.current.index})})))),[x,I,R]);return e(l.Content,{children:e(m,{id:"combobox-options-outer",animate:{opacity:[0,.2,1],scale:[.9,1],duration:.2},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r("div",{...H,role:"listbox",className:h(N.container,N[`s__${z}`],j&&N.round,D&&N.modal,H.className),onBlur:e=>{H.onBlur?.(e),L.current.index=-1},onKeyDown:e=>{if(H.onKeyDown?.(e),"Tab"!==e.key&&"ArrowDown"!==e.key&&"ArrowUp"!==e.key)return;const{index:r,list:o}=L.current,t="ArrowUp"===e.key||e.shiftKey?Math.max(r-1,-1):Math.min(r+1,o.length-1),n=t<0?g(A.current,!1):o[L.current.index=t];n?n.focus():L.current.index=0,(n||"Tab"!==e.key)&&e.preventDefault()},children:[M&&e(u,{round:j,size:z,variant:"minimal",placeholder:S,icon:e(y,{type:"search"}),inputRef:e=>L.current.list[0]=e,autoFocus:0==L.current.index,onFocus:()=>L.current.index=0,defaultValue:R,onChange:e=>V(e.target.value.toLowerCase()),cc:{...w,field:N.field,content:N.field__content}}),e(d,{className:N.content,onScroll:e=>W(e.currentTarget.scrollTop),onTouchStart:e=>e.stopPropagation(),children:r("div",{style:{padding:".25em",minHeight:F?F*K.current:void 0},children:[e("div",{style:{height:F*I.start}}),e(m,{id:"combobox-options-inner",inherit:!0,cachable:[],animate:{opacity:[0,1],scale:[.95,1],duration:.2},staggerLimit:4,stagger:.05,children:(!F||I.end!==1/0)&&$}),!K.current&&e("div",{className:N.message,children:C})]})})]})})})}w.displayName="Combobox.Content";export{w as default};
 //# sourceMappingURL=content.js.map

package/dist/components/navigation/pagination.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as a,jsx as r}from"react/jsx-runtime";import{useId as e,useState as i,useRef as t,Fragment as o}from"react";import{combineClasses as n,classes as l}from"../../core/utils.js";import{createStyles as s}from"../../core/style.js";import{Icon as d}from"../../core/icons.js";import c from"../feedback/halo.js";import{Morph as m}from"@infinityfx/lively/layout";import{Animatable as u}from"@infinityfx/lively";import{useTrigger as b}from"@infinityfx/lively/hooks";const f=s("pagination",{".pagination":{display:"flex",gap:"var(--f-spacing-xsm)"},".pill":{gap:"var(--f-spacing-xxs)"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".buttons":{display:"grid",gap:"inherit",gridAutoFlow:"column"},".buttons .layer":{width:"100%",height:"100%",borderRadius:"var(--f-radius-sml)",transition:"background-color .35s"},".pagination:not(.v__minimal) .layer":{backgroundColor:"var(--f-clr-fg-100)"},'.pagination[aria-disabled="true"] .layer':{backgroundColor:"var(--f-clr-grey-100)"},".button":{overflow:"hidden",position:"relative",border:"none",outline:"none",background:"none",color:"var(--f-clr-text-100)",width:"2.6em",height:"2.6em",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"var(--f-radius-sml)",fontWeight:500,transition:"background-color .35s, color .35s",WebkitTapHighlightColor:"transparent"},".buttons .button":{backgroundColor:"transparent !important"},".pagination:not(.v__minimal) .button:enabled":{backgroundColor:"var(--f-clr-fg-100)"},".button:enabled":{cursor:"pointer"},".button:disabled":{backgroundColor:"var(--f-clr-grey-100)",color:"var(--f-clr-grey-500)"},'.button[aria-current="page"]':{color:"var(--f-clr-text-200)"},".pagination .layer.selection":{backgroundColor:"var(--color, var(--f-clr-primary-100))",boxShadow:"var(--f-shadow-sml)"},".v__neutral .layer.selection":{backgroundColor:"var(--f-clr-text-100)"},'.pagination[aria-disabled="true"] .layer.selection':{backgroundColor:"var(--f-clr-grey-200)"},".round .button":{borderRadius:"99px"},".round .layer":{borderRadius:"99px"},".pill > .button:first-child":{borderTopLeftRadius:"1.3em",borderBottomLeftRadius:"1.3em"},".pill > .button:last-child":{borderTopRightRadius:"1.3em",borderBottomRightRadius:"1.3em"},".indices":{width:"7.8em",height:"2.6em",display:"flex"},".indices > *":{width:"2.6em",height:"2.6em",display:"flex",alignItems:"center",justifyContent:"center"}});function p({cc:s={},pages:p,defaultPage:g=0,page:h,onChange:y,compact:v,skipable:x,shape:k="square",size:C,variant:_,disabled:w,color:N,...R}){const z=n(f,s),j=e(),M=b(),[S,T]=void 0!==h?[h,y]:i(g);function $(){const a=Math.min(p,3);return new Array(a).fill(0).map(((r,e)=>e?e<a-1?Math.min(Math.max(S,1),p-2):x?Math.max(Math.min(S+1,p-1),2):p-1:x?Math.min(Math.max(S-1,0),p-3):0))}const A=t($()),B=a=>{A.current=$(),T?.(a),y?.(a),M()},I=S<1||w,L=S>=p-1||w;return a("div",{...R,style:{...R.style,"--color":N},role:"navigation","aria-disabled":w,className:l(z.pagination,z[`s__${C}`],z[`v__${_}`],z[k],R.className),children:[x&&r(c,{disabled:I,children:r("button",{disabled:I,"aria-label":"1",className:z.button,onClick:()=>B(0),children:r(d,{type:"first"})})}),r(c,{disabled:I,children:r("button",{disabled:I,"aria-label":S+"",className:z.button,onClick:()=>B(S-1),children:r(d,{type:"left"})})}),!v&&r("div",{className:z.buttons,children:$().map(((e,i)=>{const t=A.current[i],n={gridColumn:i+1,gridRow:1};return a(o,{children:[r("div",{className:z.layer,style:n}),e===S&&r(m,{group:`${j}-pagination-selection`,cachable:["x"],transition:{duration:.35},children:r("div",{className:l(z.layer,z.selection),style:n})}),r(c,{disabled:w,children:r("button",{type:"button",disabled:w,className:l(z.button,z.index),style:n,"aria-current":e===S?"page":void 0,onClick:()=>B(e),children:r(u,{animations:{forward:{translate:["33.3% 0%","0% 0%"],duration:.35},back:{translate:["-33.3% 0%","0% 0%"],duration:.35}},triggers:[{name:"forward",on:t-e<0&&M,immediate:!0},{name:"back",on:t-e>0&&M,immediate:!0}],children:a("div",{className:z.indices,children:[r("span",{children:t+1}),r("span",{children:e+1}),r("span",{children:t+1})]})})})})]},i)}))}),r(c,{disabled:L,children:r("button",{disabled:L,"aria-label":S+2+"",className:z.button,onClick:()=>B(S+1),children:r(d,{type:"right"})})}),x&&r(c,{disabled:L,children:r("button",{disabled:L,"aria-label":p+"",className:z.button,onClick:()=>B(p-1),children:r(d,{type:"last"})})})]})}export{p as default};
+import{jsxs as a,jsx as r}from"react/jsx-runtime";import{useId as e,useState as i,useRef as t,Fragment as o}from"react";import{combineClasses as n,classes as l}from"../../core/utils.js";import{createStyles as s}from"../../core/style.js";import{Icon as d}from"../../core/icons.js";import c from"../feedback/halo.js";import{Morph as m}from"@infinityfx/lively/layout";import{Animatable as u}from"@infinityfx/lively";import{useTrigger as b}from"@infinityfx/lively/hooks";const f=s("pagination",{".pagination":{display:"flex",gap:"var(--f-spacing-xsm)"},".pill":{gap:"var(--f-spacing-xxs)"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".buttons":{display:"grid",gap:"inherit",gridAutoFlow:"column"},".buttons .layer":{width:"100%",height:"100%",borderRadius:"var(--f-radius-sml)",transition:"background-color .35s"},".pagination:not(.v__minimal) .layer":{backgroundColor:"var(--f-clr-fg-100)"},'.pagination[aria-disabled="true"] .layer':{backgroundColor:"var(--f-clr-grey-100)"},".button":{overflow:"hidden",position:"relative",border:"none",outline:"none",background:"none",color:"var(--f-clr-text-100)",width:"2.6em",height:"2.6em",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"var(--f-radius-sml)",fontWeight:500,transition:"background-color .35s, color .35s",WebkitTapHighlightColor:"transparent"},".buttons .button":{backgroundColor:"transparent !important"},".pagination:not(.v__minimal) .button:enabled":{backgroundColor:"var(--f-clr-fg-100)"},".button:enabled":{cursor:"pointer"},".button:disabled":{backgroundColor:"var(--f-clr-grey-100)",color:"var(--f-clr-grey-500)"},'.button[aria-current="page"]':{color:"var(--f-clr-text-200)"},".pagination .layer.selection":{backgroundColor:"var(--color, var(--f-clr-primary-100))",boxShadow:"var(--f-shadow-sml)"},".v__neutral .layer.selection":{backgroundColor:"var(--f-clr-text-100)"},'.pagination[aria-disabled="true"] .layer.selection':{backgroundColor:"var(--f-clr-grey-200)"},".round .button":{borderRadius:"99px"},".round .layer":{borderRadius:"99px"},".pill > .button:first-child":{borderTopLeftRadius:"1.3em",borderBottomLeftRadius:"1.3em"},".pill > .button:last-child":{borderTopRightRadius:"1.3em",borderBottomRightRadius:"1.3em"},".indices":{width:"7.8em",height:"2.6em",display:"flex"},".indices > *":{width:"2.6em",height:"2.6em",display:"flex",alignItems:"center",justifyContent:"center"}});function p({cc:s={},pages:p,defaultPage:g=0,page:h,onChange:y,compact:v,skipable:x,shape:k="square",size:C,variant:_,disabled:w,color:N,...R}){const z=n(f,s),j=e(),M=b(),[S,T]=void 0!==h?[h,y]:i(g);function $(){const a=Math.min(p,3);return new Array(a).fill(0).map(((r,e)=>e?e<a-1?Math.min(Math.max(S,1),p-2):x?Math.max(Math.min(S+1,p-1),2):p-1:x?Math.min(Math.max(S-1,0),p-3):0))}const A=t($()),B=a=>{A.current=$(),T?.(a),y?.(a),M()},I=S<1||w,L=S>=p-1||w;return a("div",{...R,style:{...R.style,"--color":N},role:"navigation","aria-disabled":w,className:l(z.pagination,z[`s__${C}`],z[`v__${_}`],z[k],R.className),children:[x&&r(c,{disabled:I,children:r("button",{disabled:I,"aria-label":"1",className:z.button,onClick:()=>B(0),children:r(d,{type:"first"})})}),r(c,{disabled:I,children:r("button",{disabled:I,"aria-label":S+"",className:z.button,onClick:()=>B(S-1),children:r(d,{type:"left"})})}),!v&&r("div",{className:z.buttons,children:$().map(((e,i)=>{const t=void 0!==A.current[i]?A.current[i]:e,n={gridColumn:i+1,gridRow:1};return a(o,{children:[r("div",{className:z.layer,style:n}),e===S&&r(m,{group:`${j}-pagination-selection`,cachable:["x"],transition:{duration:.35},children:r("div",{className:l(z.layer,z.selection),style:n})}),r(c,{disabled:w,children:r("button",{type:"button",disabled:w,className:l(z.button,z.index),style:n,"aria-current":e===S?"page":void 0,onClick:()=>B(e),children:r(u,{animations:{forward:{translate:["33.3% 0%","0% 0%"],duration:.35},back:{translate:["-33.3% 0%","0% 0%"],duration:.35}},triggers:[{name:"forward",on:t-e<0&&M,immediate:!0},{name:"back",on:t-e>0&&M,immediate:!0}],children:a("div",{className:z.indices,children:[r("span",{children:t+1}),r("span",{children:e+1}),r("span",{children:t+1})]})})})})]},i)}))}),r(c,{disabled:L,children:r("button",{disabled:L,"aria-label":S+2+"",className:z.button,onClick:()=>B(S+1),children:r(d,{type:"right"})})}),x&&r(c,{disabled:L,children:r("button",{disabled:L,"aria-label":p+"",className:z.button,onClick:()=>B(p-1),children:r(d,{type:"last"})})})]})}export{p as default};
 //# sourceMappingURL=pagination.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infinityfx/fluid",
-	"version": "1.4.14",
+	"version": "1.4.16",
 	"type": "module",
 	"description": "React UI library, using zero-runtime CSS-in-JS.",
 	"main": "dist/index.js",