@canonical/maas-react-components 2.0.3 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5558,23 +5558,23 @@ const Mr = ({
|
|
|
5558
5558
|
}, Or = ({ table: e, ...n }) => {
|
|
5559
5559
|
if (!e)
|
|
5560
5560
|
return null;
|
|
5561
|
-
const t = e.getCoreRowModel().rows.filter((
|
|
5562
|
-
let
|
|
5563
|
-
return
|
|
5561
|
+
const t = e.getCoreRowModel().rows.filter((a) => a.getCanSelect()), i = e.getSelectedRowModel().rows.filter((a) => a.getCanSelect());
|
|
5562
|
+
let o;
|
|
5563
|
+
return i.length === 0 ? o = "false" : i.length < t.length ? o = "mixed" : o = "true", /* @__PURE__ */ B("label", { className: "p-checkbox--inline p-table-checkbox--all", children: [
|
|
5564
5564
|
/* @__PURE__ */ u(
|
|
5565
5565
|
"input",
|
|
5566
5566
|
{
|
|
5567
|
-
"aria-checked":
|
|
5567
|
+
"aria-checked": o,
|
|
5568
5568
|
"aria-label": "select all",
|
|
5569
5569
|
className: "p-checkbox__input",
|
|
5570
5570
|
disabled: t.length === 0,
|
|
5571
5571
|
type: "checkbox",
|
|
5572
|
-
checked:
|
|
5572
|
+
checked: o === "true",
|
|
5573
5573
|
onChange: () => {
|
|
5574
|
-
const
|
|
5575
|
-
(
|
|
5574
|
+
const a = e.getCoreRowModel().rows.filter((l) => l.getCanSelect()), r = a.every(
|
|
5575
|
+
(l) => l.getIsSelected()
|
|
5576
5576
|
);
|
|
5577
|
-
|
|
5577
|
+
a.forEach((l) => l.toggleSelected(!r));
|
|
5578
5578
|
},
|
|
5579
5579
|
...n
|
|
5580
5580
|
}
|
|
@@ -52,4 +52,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
52
52
|
* LICENSE.md file in the root directory of this source tree.
|
|
53
53
|
*
|
|
54
54
|
* @license MIT
|
|
55
|
-
*/function ai(e,n){return e?Ga(e)?ce.createElement(e,n):e:null}function Ga(e){return Ba(e)||typeof e=="function"||Ua(e)}function Ba(e){return typeof e=="function"&&(()=>{const n=Object.getPrototypeOf(e);return n.prototype&&n.prototype.isReactComponent})()}function Ua(e){return typeof e=="object"&&typeof e.$$typeof=="symbol"&&["react.memo","react.forward_ref"].includes(e.$$typeof.description)}function Ka(e){const n={state:{},onStateChange:()=>{},renderFallbackValue:null,...e},[t]=ce.useState(()=>({current:za(n)})),[i,o]=ce.useState(()=>t.current.initialState);return t.current.setOptions(a=>({...a,...e,state:{...i,...e.state},onStateChange:r=>{o(r),e.onStateChange==null||e.onStateChange(r)}})),t.current}const ri=({header:e})=>{var n;return{asc:c.jsx(q.Icon,{name:"chevron-up",children:"ascending"}),desc:c.jsx(q.Icon,{name:"chevron-down",children:"descending"})}[(n=e==null?void 0:e.column)==null?void 0:n.getIsSorted()]??null},Wa=({header:e})=>{var o;const n=e.column.getCanSort(),t=(o=e.column.columnDef.meta)==null?void 0:o.isInteractiveHeader,i=ai(e.column.columnDef.header,e.getContext());return c.jsx("th",{className:U("p-column-header",e.column.id),children:n&&!t?c.jsx(q.Button,{appearance:"link",className:"p-button--column-header",onClick:e.column.getToggleSortingHandler(),type:"button",children:c.jsxs(c.Fragment,{children:[i,c.jsx(ri,{header:e})]})}):c.jsxs("span",{className:"p-container--column-header",children:[i,n&&!t&&c.jsx(ri,{header:e})]})},e.id)},Re=({children:e})=>c.jsx("section",{className:"controls-bar u-flex u-flex--justify-between u-flex--wrap",children:c.jsx("div",{className:"p-form p-form--inline",children:e})}),Ya=({children:e})=>c.jsx("strong",{className:"controls-bar__description",children:e}),Xa=({children:e})=>c.jsx("div",{className:"u-flex u-flex--wrap u-flex--column-x-small controls-bar__right",children:e});Re.Left=Ya,Re.Right=Xa;const Qa=({currentPage:e,itemsPerPage:n,totalItems:t,handlePageSizeChange:i,dataContext:o,setCurrentPage:a,isPending:r,pageSizes:l=[20,30,50,100]})=>{const s=w.useMemo(()=>l,[]),p=w.useMemo(()=>s.map(u=>({label:`${u}/page`,value:u})),[s]),d=Math.ceil(t/n),f=u=>{const{value:m}=u.target;i(Number(m))},g=()=>e===d?n-(d*n-t):e<d?n:0;return c.jsxs(Re,{children:[c.jsxs(Re.Left,{children:["Showing ",g()," out of ",t," ",o]}),c.jsxs(Re.Right,{children:[c.jsx(rn,{currentPage:e,disabled:r,paginate:a,totalPages:d}),c.jsx(q.Select,{"aria-label":"Items per page",className:"u-no-margin--bottom",name:"Items per page",onChange:f,options:p,value:n})]})]})},Ja=({table:e,...n})=>{if(!e)return null;const t=e.getCoreRowModel().rows.filter(o=>o.getCanSelect());let i;return e.getSelectedRowModel().rows.length===0?i="false":e.getSelectedRowModel().rows.length<t.length?i="mixed":i="true",c.jsxs("label",{className:"p-checkbox--inline p-table-checkbox--all",children:[c.jsx("input",{"aria-checked":i,"aria-label":"select all",className:"p-checkbox__input",disabled:t.length===0,type:"checkbox",checked:i==="true",onChange:()=>{const o=e.getCoreRowModel().rows.filter(r=>r.getCanSelect()),a=o.every(r=>r.getIsSelected());o.forEach(r=>r.toggleSelected(!a))},...n}),c.jsx("span",{className:"p-checkbox__label"})]})},Za=({row:e,...n})=>{if(!e)return null;const t=e.subRows.filter(r=>r.getCanSelect()),i=t.filter(r=>r.getIsSelected()).length,o=t.length>0&&i===t.length,a=i>0&&!o;return c.jsxs("label",{"aria-disabled":!e.getCanSelect(),className:"p-checkbox--inline p-table-checkbox--group",children:[c.jsx("input",{"aria-checked":a?"mixed":void 0,className:"p-checkbox__input",type:"checkbox",checked:o,disabled:!e.getCanSelect()&&t.length===0,onChange:()=>{const r=!o;t.forEach(l=>l.toggleSelected(r))},...n}),c.jsx("span",{className:"p-checkbox__label"})]})},Pe=({row:e,disabledTooltip:n,isNested:t=!1,...i})=>{if(!e)return null;const o=typeof n=="string"?n:n(e);return c.jsx(q.Tooltip,{message:!e.getCanSelect()&&o,position:"btm-right",children:c.jsxs("label",{"aria-disabled":!e.getCanSelect(),className:"p-checkbox--inline p-table-checkbox",children:[c.jsx("input",{className:"p-checkbox__input",type:"checkbox",checked:e.getIsSelected(),disabled:!e.getCanSelect()||t,onChange:e.getToggleSelectedHandler(),...i}),c.jsx("span",{className:"p-checkbox__label"})]})})};Pe.All=Ja,Pe.Group=Za;const er=({className:e,columns:n,containerRef:t,data:i,filterCells:o=()=>!0,filterHeaders:a=()=>!0,getSubRows:r,groupBy:l,isLoading:s,noData:p,pagination:d,pinGroup:f,sorting:g=[],selection:u,setSorting:m,showChevron:v=!1,variant:P="full-height",...h})=>{const O=w.useRef(null),[S,T]=w.useState("auto"),[x,L]=w.useState(!1),[V,J]=w.useState(l??[]),[Z,pe]=w.useState(g??[]),[ue,xe]=w.useState(!0),$=!!u,F=C=>{xe(D=>{const b=typeof C=="function"?C(D):C;if(b===!0)return!0;const E={...b};if(D!==!0)for(const I of Object.keys(D))I in E||(E[I]=!1);return E})};w.useEffect(()=>{V.length&&F(C=>{const b={...C===!0?{}:{...C}};for(const E of i){const I=V.map(A=>`${A}:${E[A]}`).join(">");I in b||(b[I]=!0)}return b})},[i,V]);const B=w.useMemo(()=>{let C=[...n];if(s)return C;if($){const D=[{id:"p-generic-table__select",accessorKey:"id",enableSorting:!1,header:({table:b})=>l?"":c.jsx(Pe.All,{table:b}),cell:({row:b})=>{const E=u.rowSelectionLabelKey&&u.rowSelectionLabelKey in b.original?`select ${b.original[u.rowSelectionLabelKey]}`:"select row";return b.getIsGrouped()?null:c.jsx(Pe,{"aria-label":E,disabledTooltip:u.disabledSelectionTooltip??"",isNested:r!==void 0&&!!b.parentId,row:b})}},...C];if(l){const b=E=>l[0]in E.original?`select ${E.original[l[0]]}`:"select group";C=[{id:"p-generic-table__group-select",accessorKey:"id",enableSorting:!1,header:({table:E})=>c.jsx(Pe.All,{table:E}),cell:({row:E})=>E.getIsGrouped()?c.jsx(Pe.Group,{"aria-label":b(E),row:E}):null},...D]}else C=D}return l&&v&&(C=[{id:"p-generic-table__group-chevron",accessorKey:"id",enableSorting:!1,header:"",cell:({row:b})=>{const E=b.getIsExpanded();return b.getIsGrouped()?c.jsx(q.Tooltip,{message:E?"Collapse":"Expand",position:"btm-right",children:c.jsx(q.Icon,{name:E?q.ICONS.chevronUp:q.ICONS.chevronDown})}):null}},...C]),C},[$,n,s,l,r]),Q=w.useMemo(()=>V.length?[...i].sort((C,D)=>{for(const b of V){const E=C[b]??null,I=D[b]??null;if(E===null)return 1;if(I===null||E<I)return-1;if(E>I)return 1}return 0}):i,[i,V]),ee=w.useMemo(()=>Q.length?[...Q].sort((C,D)=>{if(f!=null&&f.length&&V.length)for(const{value:b,isTop:E}of f){const I=V[0],A=C[I]??null,H=D[I]??null;if(A===b&&H!==b)return E?-1:1;if(H===b&&A!==b)return E?1:-1}for(const{id:b,desc:E}of Z){const I=C[b]??null,A=D[b]??null;if(I===null&&A===null)return 0;if(I===null)return E?-1:1;if(A===null||I<A)return E?1:-1;if(I>A)return E?-1:1}return 0}):[],[Q,Z,f,V]);w.useLayoutEffect(()=>{const C=()=>{const E=O.current;if(!E)return;const I=(t==null?void 0:t.current)||document.querySelector("main");if(!I)return;const A=I.getBoundingClientRect(),H=E.getBoundingClientRect(),N=A.bottom-H.top,ie=E.scrollHeight>N;L(ie),T(P==="full-height"&&ie?`${N}px`:"auto")};C();const D=new ResizeObserver(C),b=O.current;return b&&D.observe(b),window.addEventListener("resize",C),()=>{window.removeEventListener("resize",C),b&&D.unobserve(b)}},[t,ee.length,s]);const se=P==="full-height"&&x?"full-height":"regular",ne=Ka({data:ee,columns:B,state:{grouping:V,expanded:ue,sorting:Z,rowSelection:u==null?void 0:u.rowSelection},manualPagination:!0,autoResetExpanded:!1,onExpandedChange:F,onSortingChange:C=>{pe(C),m&&m(C)},onGroupingChange:J,onRowSelectionChange:u==null?void 0:u.setRowSelection,manualSorting:!0,enableSorting:!0,enableExpanding:!0,getSubRows:r,getExpandedRowModel:Na(),getCoreRowModel:Va(),getGroupedRowModel:Ha(),groupedColumnMode:!1,enableRowSelection:(u==null?void 0:u.filterSelectable)??$,enableMultiRowSelection:(u==null?void 0:u.filterSelectable)??$,getRowId:C=>C.id.toString()}),y=()=>c.jsx("tr",{children:c.jsx("td",{className:"p-generic-table__loading",colSpan:B.length,children:c.jsx(q.Spinner,{text:"Loading..."})})}),M=()=>ne.getRowModel().rows.length<1?c.jsx("tr",{children:c.jsx("td",{className:"p-generic-table__no-data",colSpan:B.length,children:p})}):ne.getRowModel().rows.map(C=>{const{getIsGrouped:D,id:b,getVisibleCells:E,parentId:I}=C,A=!D(),H=(u==null?void 0:u.rowSelection)!==void 0&&Object.keys(u.rowSelection).includes(b);return c.jsx("tr",{"aria-rowindex":parseInt(b.replace(/\D/g,"")||"0",10)+1,"aria-selected":H,className:U({"p-generic-table__individual-row":A,"p-generic-table__group-row":!A,"p-generic-table__nested-row":r!==void 0&&!!I}),onClick:()=>{A||C.toggleExpanded()},role:"row",children:E().filter(N=>!A&&(N.column.id==="p-generic-table__group-select"||N.column.id==="p-generic-table__group-chevron")?!0:o(C,N.column)).map(N=>c.jsx("td",{className:U(`${N.column.id}`),children:ai(N.column.columnDef.cell,N.getContext())},N.id))},b)});return c.jsxs("div",{className:U("p-generic-table",e),"data-testid":"p-generic-table",...h,children:[d&&c.jsx(Qa,{currentPage:d.currentPage,dataContext:d.dataContext,handlePageSizeChange:d.handlePageSizeChange,isPending:d.isPending,itemsPerPage:d.itemsPerPage,setCurrentPage:d.setCurrentPage,totalItems:d.totalItems,pageSizes:d.pageSizes}),c.jsxs("table",{"aria-busy":s,"aria-label":h["aria-label"],"aria-describedby":"generic-table-description","aria-rowcount":ee.length+1,className:U("p-generic-table__table",{"p-generic-table__is-full-height":se==="full-height","p-generic-table__is-selectable":$,"p-generic-table__is-grouped":l!==void 0}),role:"grid",children:[c.jsx("thead",{children:ne.getHeaderGroups().map(C=>c.jsx("tr",{role:"row",children:C.headers.filter(a).map((D,b)=>c.jsxs(w.Fragment,{children:[c.jsx(Wa,{header:D}),$&&l&&(!v&&b===2||v&&b===3)?c.jsx("th",{className:"p-generic-table__select-alignment",role:"columnheader"}):null]},D.id))},C.id))}),c.jsx("tbody",{ref:O,style:{overflowY:"auto",maxHeight:S},children:s?y():M()})]})]})},li={DEFAULT:4,EXPANDED:15},ve={OPEN_PAREN:"(",CLOSE_PAREN:")",EQUALS:"=",COLON:":",COMMA:","},Xe=(e,n=e.length)=>{const t=tr(e,n),{token:i,tokenStart:o,tokenEnd:a}=nr(e,n);return{context:t,token:i,tokenStart:o,tokenEnd:a}},tr=(e,n)=>{let t=0;for(let i=n-1;i>=0;i--){const o=e[i];if(o===ve.CLOSE_PAREN)t++;else if(o===ve.OPEN_PAREN){if(t===0){const r=e.slice(0,i).trimEnd().match(/([a-zA-Z0-9_-]+)\s*:\s*$/);return(r==null?void 0:r[1])||""}t--}}return""},nr=(e,n)=>{let t=n,i=n;for(;i<e.length&&/[^\s=(),]/.test(e[i]);)i++;for(;t>0&&/[^\s=(),]/.test(e[t-1]);)t--;return{token:e.slice(t,i),tokenStart:t,tokenEnd:i}},si=(e,n)=>{const t=e.charAt(n-1);return n>0&&(t===ve.CLOSE_PAREN||t===ve.COMMA)},ir=({className:e,disabled:n=!1,search:t,setSearch:i,context:o,setContext:a,setToken:r,suggestions:l,isLoading:s=!1,placeholder:p,...d})=>{const[f,g]=w.useState({isVisible:!1,highlightedIndex:-1,showingMore:!1,cursorPosition:0}),u=w.useRef(null),m=w.useRef(null),v=w.useRef(null),P=w.useMemo(()=>{const $=f.showingMore?li.EXPANDED:li.DEFAULT,F=l.slice(0,$);return!f.showingMore&&l.length>$?[...F,{value:"Show more...",type:"more"}]:F},[l,f.showingMore]),h=w.useCallback($=>{g(typeof $=="function"?F=>({...F,...$(F)}):F=>({...F,...$}))},[]),O=w.useCallback($=>{u.current&&!u.current.contains($.target)&&h({isVisible:!1,highlightedIndex:-1})},[h]),S=w.useCallback(($,F)=>{const{tokenStart:B,tokenEnd:Q}=F;if($.type==="filter"){const se=$.value+ve.COLON+ve.OPEN_PAREN;return t.slice(0,B)+se+t.slice(Q)}if(o.length===0){const se=$.type+ve.COLON+ve.OPEN_PAREN+ve.EQUALS+$.value;return t.slice(0,B)+se+t.slice(Q)}const ee=t.charAt(B-1)===ve.EQUALS?$.value:ve.EQUALS+$.value;return t.slice(0,B)+ee+t.slice(Q)},[t,o]),T=w.useCallback($=>{const F=P[$];if(!F)return;if(F.type==="more"){h({showingMore:!0});return}const B=Xe(t,f.cursorPosition),Q=S(F,B),ee=B.tokenStart+(F.type==="filter"?F.value.length+2:o.length===0?F.type.length+F.value.length+3:F.value.length+1),{context:se,token:ne}=Xe(Q,ee);a(se),r(ne),i(Q),setTimeout(()=>{v.current&&(v.current.focus(),v.current.setSelectionRange(ee,ee))},0),h({highlightedIndex:0,showingMore:!1,isVisible:F.type==="filter",cursorPosition:ee})},[P,S,t,f.cursorPosition,o,a,r,i,h]),x=w.useCallback(()=>{if(!v.current)return;const $=v.current.selectionStart||0,{context:F,token:B}=Xe(t,$);a(F),r(B),h(Q=>({...Q,isVisible:!si(t,$),cursorPosition:$}))},[t,a,r,h]),L=w.useCallback($=>{const{key:F}=$;if(f.isVisible){const B=P.length;switch(F){case"Tab":case"ArrowDown":$.preventDefault(),h({highlightedIndex:(f.highlightedIndex+1)%B});return;case"ArrowUp":$.preventDefault(),h({highlightedIndex:f.highlightedIndex<=0?B-1:f.highlightedIndex-1});return;case"Enter":$.preventDefault(),f.highlightedIndex>=0?T(f.highlightedIndex):h({isVisible:!1});return;case"Escape":$.preventDefault(),h({isVisible:!1,highlightedIndex:-1});return}}(F==="ArrowLeft"||F==="ArrowRight"||F==="Home"||F==="End")&&setTimeout(x,0)},[f,P.length,h,T,x]),V=w.useCallback($=>{const{key:F}=$;(F==="ArrowLeft"||F==="ArrowRight"||F==="Home"||F==="End")&&x()},[x]),J=w.useCallback(()=>{h({isVisible:!0,highlightedIndex:0})},[h]),Z=w.useCallback($=>{var ee;const F=((ee=v.current)==null?void 0:ee.selectionStart)||$.length,{context:B,token:Q}=Xe($,F);a(B),r(Q),i($),h({highlightedIndex:0,isVisible:!si($,F),showingMore:!1,cursorPosition:F})},[a,r,i,h]),pe=w.useCallback(()=>{setTimeout(x,0)},[x]),ue=w.useCallback(()=>{h({isVisible:!1,highlightedIndex:-1})},[h]),xe=w.useCallback($=>{h({highlightedIndex:$})},[h]);return w.useEffect(()=>(document.addEventListener("mousedown",O),()=>document.removeEventListener("mousedown",O)),[O]),c.jsxs("div",{className:U("p-query-input",e),"data-testid":"p-query-input",ref:u,...d,children:[c.jsx(q.SearchBox,{disabled:n,placeholder:p,value:t,externallyControlled:!0,autoComplete:"off",id:"query-input",name:"query-input",ref:v,onFocus:J,onChange:Z,onKeyDown:L,onKeyUp:V,onClear:ue,onClick:pe,"aria-disabled":n,"aria-expanded":f.isVisible,"aria-haspopup":"listbox","aria-owns":"query-suggestions"}),f.isVisible&&l.length>0&&c.jsx("ul",{className:"p-query-input__list",ref:m,id:"query-suggestions",role:"listbox","aria-label":"Search suggestions",children:s?c.jsx("div",{className:"p-query-input__loading",children:c.jsx(q.Spinner,{text:"Loading..."})}):P.map(($,F)=>c.jsxs("li",{className:U("p-query-input__item",{highlight:F===f.highlightedIndex}),onClick:()=>T(F),onKeyDown:()=>T(F),onMouseEnter:()=>xe(F),role:"option","aria-selected":F===f.highlightedIndex,tabIndex:-1,children:[c.jsxs("span",{className:"p-query-input__item-label",children:[c.jsx("span",{className:U({"u-text--muted":$.type==="more"}),children:$.value}),$.type==="filter"&&c.jsx("span",{className:"u-text--muted",children:":()"})]}),$.type!=="more"&&c.jsx("span",{className:"u-text--muted u-align-text--right",children:$.type})]},`${$.value}-${F}`))})]})},or=({value:e,unit:n},{binary:t=!1,convertTo:i,decimals:o=2,roundFunc:a="round"}={})=>{const r=e<0,l=Math.abs(e);if(l===0)return{value:0,unit:i||"B"};const s=t?1024:1e3,p=t?["B","KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"]:["B","KB","MB","GB","TB","PB","EB","ZB","YB"],d=p.findIndex(v=>v===n)||0,f=l*Math.pow(s,d),g=i?p.findIndex(v=>v===i):Math.floor(Math.log(f)/Math.log(s));let u=f/Math.pow(s,g);if(u%1!==0){const v=Math.pow(10,o);u=Math[a](u*v)/v}return{value:r?-u:u,unit:p[g]}};K.ContentSection=De,K.DynamicTable=bt,K.ExternalLink=hi,K.FileUpload=ia,K.FormSection=ze,K.GenericTable=er,K.InputGroup=ot,K.MainToolbar=at,K.Meter=Qt,K.MultiSelect=ra,K.MultiSelectDropdown=qn,K.Navigation=ae,K.NavigationBar=en,K.NestedFormGroup=Xi,K.Pagination=an,K.PaginationContainer=rn,K.Placeholder=Zt,K.ProgressIndicator=Jt,K.QueryInput=ir,K.Stepper=Qi,K.TableCaption=St,K.defaultFilledColors=gi,K.formatBytes=or,K.meterColor=ye,K.testIds=Ce,Object.defineProperty(K,Symbol.toStringTag,{value:"Module"})});
|
|
55
|
+
*/function ai(e,n){return e?Ga(e)?ce.createElement(e,n):e:null}function Ga(e){return Ba(e)||typeof e=="function"||Ua(e)}function Ba(e){return typeof e=="function"&&(()=>{const n=Object.getPrototypeOf(e);return n.prototype&&n.prototype.isReactComponent})()}function Ua(e){return typeof e=="object"&&typeof e.$$typeof=="symbol"&&["react.memo","react.forward_ref"].includes(e.$$typeof.description)}function Ka(e){const n={state:{},onStateChange:()=>{},renderFallbackValue:null,...e},[t]=ce.useState(()=>({current:za(n)})),[i,o]=ce.useState(()=>t.current.initialState);return t.current.setOptions(a=>({...a,...e,state:{...i,...e.state},onStateChange:r=>{o(r),e.onStateChange==null||e.onStateChange(r)}})),t.current}const ri=({header:e})=>{var n;return{asc:c.jsx(q.Icon,{name:"chevron-up",children:"ascending"}),desc:c.jsx(q.Icon,{name:"chevron-down",children:"descending"})}[(n=e==null?void 0:e.column)==null?void 0:n.getIsSorted()]??null},Wa=({header:e})=>{var o;const n=e.column.getCanSort(),t=(o=e.column.columnDef.meta)==null?void 0:o.isInteractiveHeader,i=ai(e.column.columnDef.header,e.getContext());return c.jsx("th",{className:U("p-column-header",e.column.id),children:n&&!t?c.jsx(q.Button,{appearance:"link",className:"p-button--column-header",onClick:e.column.getToggleSortingHandler(),type:"button",children:c.jsxs(c.Fragment,{children:[i,c.jsx(ri,{header:e})]})}):c.jsxs("span",{className:"p-container--column-header",children:[i,n&&!t&&c.jsx(ri,{header:e})]})},e.id)},Re=({children:e})=>c.jsx("section",{className:"controls-bar u-flex u-flex--justify-between u-flex--wrap",children:c.jsx("div",{className:"p-form p-form--inline",children:e})}),Ya=({children:e})=>c.jsx("strong",{className:"controls-bar__description",children:e}),Xa=({children:e})=>c.jsx("div",{className:"u-flex u-flex--wrap u-flex--column-x-small controls-bar__right",children:e});Re.Left=Ya,Re.Right=Xa;const Qa=({currentPage:e,itemsPerPage:n,totalItems:t,handlePageSizeChange:i,dataContext:o,setCurrentPage:a,isPending:r,pageSizes:l=[20,30,50,100]})=>{const s=w.useMemo(()=>l,[]),p=w.useMemo(()=>s.map(u=>({label:`${u}/page`,value:u})),[s]),d=Math.ceil(t/n),f=u=>{const{value:m}=u.target;i(Number(m))},g=()=>e===d?n-(d*n-t):e<d?n:0;return c.jsxs(Re,{children:[c.jsxs(Re.Left,{children:["Showing ",g()," out of ",t," ",o]}),c.jsxs(Re.Right,{children:[c.jsx(rn,{currentPage:e,disabled:r,paginate:a,totalPages:d}),c.jsx(q.Select,{"aria-label":"Items per page",className:"u-no-margin--bottom",name:"Items per page",onChange:f,options:p,value:n})]})]})},Ja=({table:e,...n})=>{if(!e)return null;const t=e.getCoreRowModel().rows.filter(a=>a.getCanSelect()),i=e.getSelectedRowModel().rows.filter(a=>a.getCanSelect());let o;return i.length===0?o="false":i.length<t.length?o="mixed":o="true",c.jsxs("label",{className:"p-checkbox--inline p-table-checkbox--all",children:[c.jsx("input",{"aria-checked":o,"aria-label":"select all",className:"p-checkbox__input",disabled:t.length===0,type:"checkbox",checked:o==="true",onChange:()=>{const a=e.getCoreRowModel().rows.filter(l=>l.getCanSelect()),r=a.every(l=>l.getIsSelected());a.forEach(l=>l.toggleSelected(!r))},...n}),c.jsx("span",{className:"p-checkbox__label"})]})},Za=({row:e,...n})=>{if(!e)return null;const t=e.subRows.filter(r=>r.getCanSelect()),i=t.filter(r=>r.getIsSelected()).length,o=t.length>0&&i===t.length,a=i>0&&!o;return c.jsxs("label",{"aria-disabled":!e.getCanSelect(),className:"p-checkbox--inline p-table-checkbox--group",children:[c.jsx("input",{"aria-checked":a?"mixed":void 0,className:"p-checkbox__input",type:"checkbox",checked:o,disabled:!e.getCanSelect()&&t.length===0,onChange:()=>{const r=!o;t.forEach(l=>l.toggleSelected(r))},...n}),c.jsx("span",{className:"p-checkbox__label"})]})},Pe=({row:e,disabledTooltip:n,isNested:t=!1,...i})=>{if(!e)return null;const o=typeof n=="string"?n:n(e);return c.jsx(q.Tooltip,{message:!e.getCanSelect()&&o,position:"btm-right",children:c.jsxs("label",{"aria-disabled":!e.getCanSelect(),className:"p-checkbox--inline p-table-checkbox",children:[c.jsx("input",{className:"p-checkbox__input",type:"checkbox",checked:e.getIsSelected(),disabled:!e.getCanSelect()||t,onChange:e.getToggleSelectedHandler(),...i}),c.jsx("span",{className:"p-checkbox__label"})]})})};Pe.All=Ja,Pe.Group=Za;const er=({className:e,columns:n,containerRef:t,data:i,filterCells:o=()=>!0,filterHeaders:a=()=>!0,getSubRows:r,groupBy:l,isLoading:s,noData:p,pagination:d,pinGroup:f,sorting:g=[],selection:u,setSorting:m,showChevron:v=!1,variant:P="full-height",...h})=>{const O=w.useRef(null),[S,T]=w.useState("auto"),[x,L]=w.useState(!1),[V,J]=w.useState(l??[]),[Z,pe]=w.useState(g??[]),[ue,xe]=w.useState(!0),$=!!u,F=C=>{xe(D=>{const b=typeof C=="function"?C(D):C;if(b===!0)return!0;const E={...b};if(D!==!0)for(const I of Object.keys(D))I in E||(E[I]=!1);return E})};w.useEffect(()=>{V.length&&F(C=>{const b={...C===!0?{}:{...C}};for(const E of i){const I=V.map(A=>`${A}:${E[A]}`).join(">");I in b||(b[I]=!0)}return b})},[i,V]);const B=w.useMemo(()=>{let C=[...n];if(s)return C;if($){const D=[{id:"p-generic-table__select",accessorKey:"id",enableSorting:!1,header:({table:b})=>l?"":c.jsx(Pe.All,{table:b}),cell:({row:b})=>{const E=u.rowSelectionLabelKey&&u.rowSelectionLabelKey in b.original?`select ${b.original[u.rowSelectionLabelKey]}`:"select row";return b.getIsGrouped()?null:c.jsx(Pe,{"aria-label":E,disabledTooltip:u.disabledSelectionTooltip??"",isNested:r!==void 0&&!!b.parentId,row:b})}},...C];if(l){const b=E=>l[0]in E.original?`select ${E.original[l[0]]}`:"select group";C=[{id:"p-generic-table__group-select",accessorKey:"id",enableSorting:!1,header:({table:E})=>c.jsx(Pe.All,{table:E}),cell:({row:E})=>E.getIsGrouped()?c.jsx(Pe.Group,{"aria-label":b(E),row:E}):null},...D]}else C=D}return l&&v&&(C=[{id:"p-generic-table__group-chevron",accessorKey:"id",enableSorting:!1,header:"",cell:({row:b})=>{const E=b.getIsExpanded();return b.getIsGrouped()?c.jsx(q.Tooltip,{message:E?"Collapse":"Expand",position:"btm-right",children:c.jsx(q.Icon,{name:E?q.ICONS.chevronUp:q.ICONS.chevronDown})}):null}},...C]),C},[$,n,s,l,r]),Q=w.useMemo(()=>V.length?[...i].sort((C,D)=>{for(const b of V){const E=C[b]??null,I=D[b]??null;if(E===null)return 1;if(I===null||E<I)return-1;if(E>I)return 1}return 0}):i,[i,V]),ee=w.useMemo(()=>Q.length?[...Q].sort((C,D)=>{if(f!=null&&f.length&&V.length)for(const{value:b,isTop:E}of f){const I=V[0],A=C[I]??null,H=D[I]??null;if(A===b&&H!==b)return E?-1:1;if(H===b&&A!==b)return E?1:-1}for(const{id:b,desc:E}of Z){const I=C[b]??null,A=D[b]??null;if(I===null&&A===null)return 0;if(I===null)return E?-1:1;if(A===null||I<A)return E?1:-1;if(I>A)return E?-1:1}return 0}):[],[Q,Z,f,V]);w.useLayoutEffect(()=>{const C=()=>{const E=O.current;if(!E)return;const I=(t==null?void 0:t.current)||document.querySelector("main");if(!I)return;const A=I.getBoundingClientRect(),H=E.getBoundingClientRect(),N=A.bottom-H.top,ie=E.scrollHeight>N;L(ie),T(P==="full-height"&&ie?`${N}px`:"auto")};C();const D=new ResizeObserver(C),b=O.current;return b&&D.observe(b),window.addEventListener("resize",C),()=>{window.removeEventListener("resize",C),b&&D.unobserve(b)}},[t,ee.length,s]);const se=P==="full-height"&&x?"full-height":"regular",ne=Ka({data:ee,columns:B,state:{grouping:V,expanded:ue,sorting:Z,rowSelection:u==null?void 0:u.rowSelection},manualPagination:!0,autoResetExpanded:!1,onExpandedChange:F,onSortingChange:C=>{pe(C),m&&m(C)},onGroupingChange:J,onRowSelectionChange:u==null?void 0:u.setRowSelection,manualSorting:!0,enableSorting:!0,enableExpanding:!0,getSubRows:r,getExpandedRowModel:Na(),getCoreRowModel:Va(),getGroupedRowModel:Ha(),groupedColumnMode:!1,enableRowSelection:(u==null?void 0:u.filterSelectable)??$,enableMultiRowSelection:(u==null?void 0:u.filterSelectable)??$,getRowId:C=>C.id.toString()}),y=()=>c.jsx("tr",{children:c.jsx("td",{className:"p-generic-table__loading",colSpan:B.length,children:c.jsx(q.Spinner,{text:"Loading..."})})}),M=()=>ne.getRowModel().rows.length<1?c.jsx("tr",{children:c.jsx("td",{className:"p-generic-table__no-data",colSpan:B.length,children:p})}):ne.getRowModel().rows.map(C=>{const{getIsGrouped:D,id:b,getVisibleCells:E,parentId:I}=C,A=!D(),H=(u==null?void 0:u.rowSelection)!==void 0&&Object.keys(u.rowSelection).includes(b);return c.jsx("tr",{"aria-rowindex":parseInt(b.replace(/\D/g,"")||"0",10)+1,"aria-selected":H,className:U({"p-generic-table__individual-row":A,"p-generic-table__group-row":!A,"p-generic-table__nested-row":r!==void 0&&!!I}),onClick:()=>{A||C.toggleExpanded()},role:"row",children:E().filter(N=>!A&&(N.column.id==="p-generic-table__group-select"||N.column.id==="p-generic-table__group-chevron")?!0:o(C,N.column)).map(N=>c.jsx("td",{className:U(`${N.column.id}`),children:ai(N.column.columnDef.cell,N.getContext())},N.id))},b)});return c.jsxs("div",{className:U("p-generic-table",e),"data-testid":"p-generic-table",...h,children:[d&&c.jsx(Qa,{currentPage:d.currentPage,dataContext:d.dataContext,handlePageSizeChange:d.handlePageSizeChange,isPending:d.isPending,itemsPerPage:d.itemsPerPage,setCurrentPage:d.setCurrentPage,totalItems:d.totalItems,pageSizes:d.pageSizes}),c.jsxs("table",{"aria-busy":s,"aria-label":h["aria-label"],"aria-describedby":"generic-table-description","aria-rowcount":ee.length+1,className:U("p-generic-table__table",{"p-generic-table__is-full-height":se==="full-height","p-generic-table__is-selectable":$,"p-generic-table__is-grouped":l!==void 0}),role:"grid",children:[c.jsx("thead",{children:ne.getHeaderGroups().map(C=>c.jsx("tr",{role:"row",children:C.headers.filter(a).map((D,b)=>c.jsxs(w.Fragment,{children:[c.jsx(Wa,{header:D}),$&&l&&(!v&&b===2||v&&b===3)?c.jsx("th",{className:"p-generic-table__select-alignment",role:"columnheader"}):null]},D.id))},C.id))}),c.jsx("tbody",{ref:O,style:{overflowY:"auto",maxHeight:S},children:s?y():M()})]})]})},li={DEFAULT:4,EXPANDED:15},ve={OPEN_PAREN:"(",CLOSE_PAREN:")",EQUALS:"=",COLON:":",COMMA:","},Xe=(e,n=e.length)=>{const t=tr(e,n),{token:i,tokenStart:o,tokenEnd:a}=nr(e,n);return{context:t,token:i,tokenStart:o,tokenEnd:a}},tr=(e,n)=>{let t=0;for(let i=n-1;i>=0;i--){const o=e[i];if(o===ve.CLOSE_PAREN)t++;else if(o===ve.OPEN_PAREN){if(t===0){const r=e.slice(0,i).trimEnd().match(/([a-zA-Z0-9_-]+)\s*:\s*$/);return(r==null?void 0:r[1])||""}t--}}return""},nr=(e,n)=>{let t=n,i=n;for(;i<e.length&&/[^\s=(),]/.test(e[i]);)i++;for(;t>0&&/[^\s=(),]/.test(e[t-1]);)t--;return{token:e.slice(t,i),tokenStart:t,tokenEnd:i}},si=(e,n)=>{const t=e.charAt(n-1);return n>0&&(t===ve.CLOSE_PAREN||t===ve.COMMA)},ir=({className:e,disabled:n=!1,search:t,setSearch:i,context:o,setContext:a,setToken:r,suggestions:l,isLoading:s=!1,placeholder:p,...d})=>{const[f,g]=w.useState({isVisible:!1,highlightedIndex:-1,showingMore:!1,cursorPosition:0}),u=w.useRef(null),m=w.useRef(null),v=w.useRef(null),P=w.useMemo(()=>{const $=f.showingMore?li.EXPANDED:li.DEFAULT,F=l.slice(0,$);return!f.showingMore&&l.length>$?[...F,{value:"Show more...",type:"more"}]:F},[l,f.showingMore]),h=w.useCallback($=>{g(typeof $=="function"?F=>({...F,...$(F)}):F=>({...F,...$}))},[]),O=w.useCallback($=>{u.current&&!u.current.contains($.target)&&h({isVisible:!1,highlightedIndex:-1})},[h]),S=w.useCallback(($,F)=>{const{tokenStart:B,tokenEnd:Q}=F;if($.type==="filter"){const se=$.value+ve.COLON+ve.OPEN_PAREN;return t.slice(0,B)+se+t.slice(Q)}if(o.length===0){const se=$.type+ve.COLON+ve.OPEN_PAREN+ve.EQUALS+$.value;return t.slice(0,B)+se+t.slice(Q)}const ee=t.charAt(B-1)===ve.EQUALS?$.value:ve.EQUALS+$.value;return t.slice(0,B)+ee+t.slice(Q)},[t,o]),T=w.useCallback($=>{const F=P[$];if(!F)return;if(F.type==="more"){h({showingMore:!0});return}const B=Xe(t,f.cursorPosition),Q=S(F,B),ee=B.tokenStart+(F.type==="filter"?F.value.length+2:o.length===0?F.type.length+F.value.length+3:F.value.length+1),{context:se,token:ne}=Xe(Q,ee);a(se),r(ne),i(Q),setTimeout(()=>{v.current&&(v.current.focus(),v.current.setSelectionRange(ee,ee))},0),h({highlightedIndex:0,showingMore:!1,isVisible:F.type==="filter",cursorPosition:ee})},[P,S,t,f.cursorPosition,o,a,r,i,h]),x=w.useCallback(()=>{if(!v.current)return;const $=v.current.selectionStart||0,{context:F,token:B}=Xe(t,$);a(F),r(B),h(Q=>({...Q,isVisible:!si(t,$),cursorPosition:$}))},[t,a,r,h]),L=w.useCallback($=>{const{key:F}=$;if(f.isVisible){const B=P.length;switch(F){case"Tab":case"ArrowDown":$.preventDefault(),h({highlightedIndex:(f.highlightedIndex+1)%B});return;case"ArrowUp":$.preventDefault(),h({highlightedIndex:f.highlightedIndex<=0?B-1:f.highlightedIndex-1});return;case"Enter":$.preventDefault(),f.highlightedIndex>=0?T(f.highlightedIndex):h({isVisible:!1});return;case"Escape":$.preventDefault(),h({isVisible:!1,highlightedIndex:-1});return}}(F==="ArrowLeft"||F==="ArrowRight"||F==="Home"||F==="End")&&setTimeout(x,0)},[f,P.length,h,T,x]),V=w.useCallback($=>{const{key:F}=$;(F==="ArrowLeft"||F==="ArrowRight"||F==="Home"||F==="End")&&x()},[x]),J=w.useCallback(()=>{h({isVisible:!0,highlightedIndex:0})},[h]),Z=w.useCallback($=>{var ee;const F=((ee=v.current)==null?void 0:ee.selectionStart)||$.length,{context:B,token:Q}=Xe($,F);a(B),r(Q),i($),h({highlightedIndex:0,isVisible:!si($,F),showingMore:!1,cursorPosition:F})},[a,r,i,h]),pe=w.useCallback(()=>{setTimeout(x,0)},[x]),ue=w.useCallback(()=>{h({isVisible:!1,highlightedIndex:-1})},[h]),xe=w.useCallback($=>{h({highlightedIndex:$})},[h]);return w.useEffect(()=>(document.addEventListener("mousedown",O),()=>document.removeEventListener("mousedown",O)),[O]),c.jsxs("div",{className:U("p-query-input",e),"data-testid":"p-query-input",ref:u,...d,children:[c.jsx(q.SearchBox,{disabled:n,placeholder:p,value:t,externallyControlled:!0,autoComplete:"off",id:"query-input",name:"query-input",ref:v,onFocus:J,onChange:Z,onKeyDown:L,onKeyUp:V,onClear:ue,onClick:pe,"aria-disabled":n,"aria-expanded":f.isVisible,"aria-haspopup":"listbox","aria-owns":"query-suggestions"}),f.isVisible&&l.length>0&&c.jsx("ul",{className:"p-query-input__list",ref:m,id:"query-suggestions",role:"listbox","aria-label":"Search suggestions",children:s?c.jsx("div",{className:"p-query-input__loading",children:c.jsx(q.Spinner,{text:"Loading..."})}):P.map(($,F)=>c.jsxs("li",{className:U("p-query-input__item",{highlight:F===f.highlightedIndex}),onClick:()=>T(F),onKeyDown:()=>T(F),onMouseEnter:()=>xe(F),role:"option","aria-selected":F===f.highlightedIndex,tabIndex:-1,children:[c.jsxs("span",{className:"p-query-input__item-label",children:[c.jsx("span",{className:U({"u-text--muted":$.type==="more"}),children:$.value}),$.type==="filter"&&c.jsx("span",{className:"u-text--muted",children:":()"})]}),$.type!=="more"&&c.jsx("span",{className:"u-text--muted u-align-text--right",children:$.type})]},`${$.value}-${F}`))})]})},or=({value:e,unit:n},{binary:t=!1,convertTo:i,decimals:o=2,roundFunc:a="round"}={})=>{const r=e<0,l=Math.abs(e);if(l===0)return{value:0,unit:i||"B"};const s=t?1024:1e3,p=t?["B","KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"]:["B","KB","MB","GB","TB","PB","EB","ZB","YB"],d=p.findIndex(v=>v===n)||0,f=l*Math.pow(s,d),g=i?p.findIndex(v=>v===i):Math.floor(Math.log(f)/Math.log(s));let u=f/Math.pow(s,g);if(u%1!==0){const v=Math.pow(10,o);u=Math[a](u*v)/v}return{value:r?-u:u,unit:p[g]}};K.ContentSection=De,K.DynamicTable=bt,K.ExternalLink=hi,K.FileUpload=ia,K.FormSection=ze,K.GenericTable=er,K.InputGroup=ot,K.MainToolbar=at,K.Meter=Qt,K.MultiSelect=ra,K.MultiSelectDropdown=qn,K.Navigation=ae,K.NavigationBar=en,K.NestedFormGroup=Xi,K.Pagination=an,K.PaginationContainer=rn,K.Placeholder=Zt,K.ProgressIndicator=Jt,K.QueryInput=ir,K.Stepper=Qi,K.TableCaption=St,K.defaultFilledColors=gi,K.formatBytes=or,K.meterColor=ye,K.testIds=Ce,Object.defineProperty(K,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -17,6 +17,7 @@ export declare const Loading: Story;
|
|
|
17
17
|
export declare const Empty: Story;
|
|
18
18
|
export declare const Selectable: Story;
|
|
19
19
|
export declare const ConditionallySelectable: Story;
|
|
20
|
+
export declare const PreSelected: Story;
|
|
20
21
|
export declare const Grouped: Story;
|
|
21
22
|
export declare const GroupedSelectable: Story;
|
|
22
23
|
export declare const GroupedNested: Story;
|
package/package.json
CHANGED