@okta/odyssey-contribution-tooling 1.52.0 → 1.53.0

package/dist/assets/DataView-BS0E464o.js

@@ -0,0 +1,91 @@
+import{s as $}from"./tableRowClasses-Bk1uFtwh.js";import{p as gn,g as qt,r as s,j as i}from"./iframe-CQjT1fxh.js";import{M as Te}from"./Box-B3rdnavX.js";import{M as We}from"./MenuButton-BffESdH9.js";import{M as Jt}from"./Callout-WJN7MCgu.js";import{c as Qt}from"./createUniqueId-BHjR7HQF.js";import{u as Xt,b as Yt,a as Zt,M as Ot}from"./useScrollIndication-BGw7dgC5.js";import{M as Lt}from"./EmptyState-B1EvR4rn.js";import{u as rn,a as Fe,t as er}from"./OdysseyThemeProvider-BA0_xP7N.js";import{M as nr}from"./Typography-CjpHjc10.js";import{M as tr}from"./DataFilters-4og6bOFS.js";import{M as _n}from"./Button-0PI4ljbj.js";import{M as mn}from"./WarningFilled-DOHs-JmZ.js";import{M as rr}from"./CircularProgress-B7sj16Me.js";import{M as ir}from"./Card-CYHxgfcj.js";import{M as sr}from"./ChevronUp-D226bAv0.js";import{C as Un}from"./Checkbox-mRntsWEy.js";import{T as ar}from"./Tooltip-yxN-KFjL.js";import{I as Wn}from"./IconButton-BPR_sq0F.js";import{M as Be}from"./MenuItem-Cmq8TfUJ.js";import{M as or,a as lr,b as Kn,c as cr,e as Vn,f as dr,d as ur}from"./List-CZ2bN2bA.js";import{d as Rn,a as fr}from"./constants-CGUp4oSR.js";import{u as gr,a as mr}from"./index.esm-Bohtd3OQ.js";import{M as vn}from"./More-BAN0OFVF.js";import{M as pr}from"./Show-C6ORd-wr.js";var tn={exports:{}};tn.exports;var Hn;function hr(){return Hn||(Hn=1,function(r,u){var f=200,c="__lodash_hash_undefined__",m=1,l=2,a=9007199254740991,d="[object Arguments]",y="[object Array]",A="[object AsyncFunction]",C="[object Boolean]",T="[object Date]",w="[object Error]",D="[object Function]",b="[object GeneratorFunction]",z="[object Map]",U="[object Number]",q="[object Null]",p="[object Object]",_="[object Promise]",K="[object Proxy]",me="[object RegExp]",J="[object Set]",ee="[object String]",Ke="[object Symbol]",_e="[object Undefined]",ne="[object WeakMap]",ae="[object ArrayBuffer]",Q="[object DataView]",te="[object Float32Array]",re="[object Float64Array]",O="[object Int8Array]",k="[object Int16Array]",pe="[object Int32Array]",Pe="[object Uint8Array]",E="[object Uint8ClampedArray]",oe="[object Uint16Array]",Ve="[object Uint32Array]",Re=/[\\^$.*+?()[\]{}|]/g,he=/^\[object .+?Constructor\]$/,le=/^(?:0|[1-9]\d*)$/,x={};x[te]=x[re]=x[O]=x[k]=x[pe]=x[Pe]=x[E]=x[oe]=x[Ve]=!0,x[d]=x[y]=x[ae]=x[C]=x[Q]=x[T]=x[w]=x[D]=x[z]=x[U]=x[p]=x[me]=x[J]=x[ee]=x[ne]=!1;var X=typeof gn=="object"&&gn&&gn.Object===Object&&gn,$e=typeof self=="object"&&self&&self.Object===Object&&self,v=X||$e||Function("return this")(),ve=u&&!u.nodeType&&u,ie=ve&&!0&&r&&!r.nodeType&&r,Me=ie&&ie.exports===ve,W=Me&&X.process,be=function(){try{return W&&W.binding&&W.binding("util")}catch{}}(),ce=be&&be.isTypedArray;function h(e,n){for(var t=-1,o=e==null?0:e.length,S=0,g=[];++t<o;){var I=e[t];n(I,t,e)&&(g[S++]=I)}return g}function F(e,n){for(var t=-1,o=n.length,S=e.length;++t<o;)e[S+t]=n[t];return e}function V(e,n){for(var t=-1,o=e==null?0:e.length;++t<o;)if(n(e[t],t,e))return!0;return!1}function se(e,n){for(var t=-1,o=Array(e);++t<e;)o[t]=n(t);return o}function pn(e){return function(n){return e(n)}}function qe(e,n){return e.has(n)}function hn(e,n){return e==null?void 0:e[n]}function Ne(e){var n=-1,t=Array(e.size);return e.forEach(function(o,S){t[++n]=[S,o]}),t}function bn(e,n){return function(t){return e(n(t))}}function Je(e){var n=-1,t=Array(e.size);return e.forEach(function(o){t[++n]=o}),t}var xn=Array.prototype,de=Function.prototype,xe=Object.prototype,B=v["__core-js_shared__"],ke=de.toString,P=xe.hasOwnProperty,Qe=function(){var e=/[^.]+$/.exec(B&&B.keys&&B.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}(),He=xe.toString,ye=RegExp("^"+ke.call(P).replace(Re,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),Xe=Me?v.Buffer:void 0,je=v.Symbol,Ye=v.Uint8Array,Ze=xe.propertyIsEnumerable,Ge=xn.splice,ue=je?je.toStringTag:void 0,sn=Object.getOwnPropertySymbols,an=Xe?Xe.isBuffer:void 0,M=bn(Object.keys,Object),Oe=Ue(v,"DataView"),Ae=Ue(v,"Map"),yn=Ue(v,"Promise"),Cn=Ue(v,"Set"),wn=Ue(v,"WeakMap"),Le=Ue(Object,"create"),On=ze(Oe),Ln=ze(Ae),et=ze(yn),nt=ze(Cn),tt=ze(wn),jn=je?je.prototype:void 0,Sn=jn?jn.valueOf:void 0;function Ie(e){var n=-1,t=e==null?0:e.length;for(this.clear();++n<t;){var o=e[n];this.set(o[0],o[1])}}function rt(){this.__data__=Le?Le(null):{},this.size=0}function it(e){var n=this.has(e)&&delete this.__data__[e];return this.size-=n?1:0,n}function st(e){var n=this.__data__;if(Le){var t=n[e];return t===c?void 0:t}return P.call(n,e)?n[e]:void 0}function at(e){var n=this.__data__;return Le?n[e]!==void 0:P.call(n,e)}function ot(e,n){var t=this.__data__;return this.size+=this.has(e)?0:1,t[e]=Le&&n===void 0?c:n,this}Ie.prototype.clear=rt,Ie.prototype.delete=it,Ie.prototype.get=st,Ie.prototype.has=at,Ie.prototype.set=ot;function fe(e){var n=-1,t=e==null?0:e.length;for(this.clear();++n<t;){var o=e[n];this.set(o[0],o[1])}}function lt(){this.__data__=[],this.size=0}function ct(e){var n=this.__data__,t=ln(n,e);if(t<0)return!1;var o=n.length-1;return t==o?n.pop():Ge.call(n,t,1),--this.size,!0}function dt(e){var n=this.__data__,t=ln(n,e);return t<0?void 0:n[t][1]}function ut(e){return ln(this.__data__,e)>-1}function ft(e,n){var t=this.__data__,o=ln(t,e);return o<0?(++this.size,t.push([e,n])):t[o][1]=n,this}fe.prototype.clear=lt,fe.prototype.delete=ct,fe.prototype.get=dt,fe.prototype.has=ut,fe.prototype.set=ft;function De(e){var n=-1,t=e==null?0:e.length;for(this.clear();++n<t;){var o=e[n];this.set(o[0],o[1])}}function gt(){this.size=0,this.__data__={hash:new Ie,map:new(Ae||fe),string:new Ie}}function mt(e){var n=cn(this,e).delete(e);return this.size-=n?1:0,n}function pt(e){return cn(this,e).get(e)}function ht(e){return cn(this,e).has(e)}function bt(e,n){var t=cn(this,e),o=t.size;return t.set(e,n),this.size+=t.size==o?0:1,this}De.prototype.clear=gt,De.prototype.delete=mt,De.prototype.get=pt,De.prototype.has=ht,De.prototype.set=bt;function on(e){var n=-1,t=e==null?0:e.length;for(this.__data__=new De;++n<t;)this.add(e[n])}function xt(e){return this.__data__.set(e,c),this}function yt(e){return this.__data__.has(e)}on.prototype.add=on.prototype.push=xt,on.prototype.has=yt;function Ce(e){var n=this.__data__=new fe(e);this.size=n.size}function Ct(){this.__data__=new fe,this.size=0}function wt(e){var n=this.__data__,t=n.delete(e);return this.size=n.size,t}function St(e){return this.__data__.get(e)}function Tt(e){return this.__data__.has(e)}function _t(e,n){var t=this.__data__;if(t instanceof fe){var o=t.__data__;if(!Ae||o.length<f-1)return o.push([e,n]),this.size=++t.size,this;t=this.__data__=new De(o)}return t.set(e,n),this.size=t.size,this}Ce.prototype.clear=Ct,Ce.prototype.delete=wt,Ce.prototype.get=St,Ce.prototype.has=Tt,Ce.prototype.set=_t;function vt(e,n){var t=dn(e),o=!t&&Ut(e),S=!t&&!o&&Tn(e),g=!t&&!o&&!S&&Nn(e),I=t||o||S||g,N=I?se(e.length,String):[],H=N.length;for(var j in e)P.call(e,j)&&!(I&&(j=="length"||S&&(j=="offset"||j=="parent")||g&&(j=="buffer"||j=="byteLength"||j=="byteOffset")||Pt(j,H)))&&N.push(j);return N}function ln(e,n){for(var t=e.length;t--;)if(En(e[t][0],n))return t;return-1}function Mt(e,n,t){var o=n(e);return dn(e)?o:F(o,t(e))}function en(e){return e==null?e===void 0?_e:q:ue&&ue in Object(e)?Bt(e):Gt(e)}function An(e){return nn(e)&&en(e)==d}function In(e,n,t,o,S){return e===n?!0:e==null||n==null||!nn(e)&&!nn(n)?e!==e&&n!==n:jt(e,n,t,o,In,S)}function jt(e,n,t,o,S,g){var I=dn(e),N=dn(n),H=I?y:we(e),j=N?y:we(n);H=H==d?p:H,j=j==d?p:j;var R=H==p,L=j==p,G=H==j;if(G&&Tn(e)){if(!Tn(n))return!1;I=!0,R=!1}if(G&&!R)return g||(g=new Ce),I||Nn(e)?Dn(e,n,t,o,S,g):zt(e,n,H,t,o,S,g);if(!(t&m)){var Y=R&&P.call(e,"__wrapped__"),Z=L&&P.call(n,"__wrapped__");if(Y||Z){var Se=Y?e.value():e,ge=Z?n.value():n;return g||(g=new Ce),S(Se,ge,t,o,g)}}return G?(g||(g=new Ce),Et(e,n,t,o,S,g)):!1}function At(e){if(!Pn(e)||kt(e))return!1;var n=Bn(e)?ye:he;return n.test(ze(e))}function It(e){return nn(e)&&Fn(e.length)&&!!x[en(e)]}function Dt(e){if(!Ht(e))return M(e);var n=[];for(var t in Object(e))P.call(e,t)&&t!="constructor"&&n.push(t);return n}function Dn(e,n,t,o,S,g){var I=t&m,N=e.length,H=n.length;if(N!=H&&!(I&&H>N))return!1;var j=g.get(e);if(j&&g.get(n))return j==n;var R=-1,L=!0,G=t&l?new on:void 0;for(g.set(e,n),g.set(n,e);++R<N;){var Y=e[R],Z=n[R];if(o)var Se=I?o(Z,Y,R,n,e,g):o(Y,Z,R,e,n,g);if(Se!==void 0){if(Se)continue;L=!1;break}if(G){if(!V(n,function(ge,Ee){if(!qe(G,Ee)&&(Y===ge||S(Y,ge,t,o,g)))return G.push(Ee)})){L=!1;break}}else if(!(Y===Z||S(Y,Z,t,o,g))){L=!1;break}}return g.delete(e),g.delete(n),L}function zt(e,n,t,o,S,g,I){switch(t){case Q:if(e.byteLength!=n.byteLength||e.byteOffset!=n.byteOffset)return!1;e=e.buffer,n=n.buffer;case ae:return!(e.byteLength!=n.byteLength||!g(new Ye(e),new Ye(n)));case C:case T:case U:return En(+e,+n);case w:return e.name==n.name&&e.message==n.message;case me:case ee:return e==n+"";case z:var N=Ne;case J:var H=o&m;if(N||(N=Je),e.size!=n.size&&!H)return!1;var j=I.get(e);if(j)return j==n;o|=l,I.set(e,n);var R=Dn(N(e),N(n),o,S,g,I);return I.delete(e),R;case Ke:if(Sn)return Sn.call(e)==Sn.call(n)}return!1}function Et(e,n,t,o,S,g){var I=t&m,N=zn(e),H=N.length,j=zn(n),R=j.length;if(H!=R&&!I)return!1;for(var L=H;L--;){var G=N[L];if(!(I?G in n:P.call(n,G)))return!1}var Y=g.get(e);if(Y&&g.get(n))return Y==n;var Z=!0;g.set(e,n),g.set(n,e);for(var Se=I;++L<H;){G=N[L];var ge=e[G],Ee=n[G];if(o)var kn=I?o(Ee,ge,G,n,e,g):o(ge,Ee,G,e,n,g);if(!(kn===void 0?ge===Ee||S(ge,Ee,t,o,g):kn)){Z=!1;break}Se||(Se=G=="constructor")}if(Z&&!Se){var un=e.constructor,fn=n.constructor;un!=fn&&"constructor"in e&&"constructor"in n&&!(typeof un=="function"&&un instanceof un&&typeof fn=="function"&&fn instanceof fn)&&(Z=!1)}return g.delete(e),g.delete(n),Z}function zn(e){return Mt(e,Vt,Ft)}function cn(e,n){var t=e.__data__;return Nt(n)?t[typeof n=="string"?"string":"hash"]:t.map}function Ue(e,n){var t=hn(e,n);return At(t)?t:void 0}function Bt(e){var n=P.call(e,ue),t=e[ue];try{e[ue]=void 0;var o=!0}catch{}var S=He.call(e);return o&&(n?e[ue]=t:delete e[ue]),S}var Ft=sn?function(e){return e==null?[]:(e=Object(e),h(sn(e),function(n){return Ze.call(e,n)}))}:Rt,we=en;(Oe&&we(new Oe(new ArrayBuffer(1)))!=Q||Ae&&we(new Ae)!=z||yn&&we(yn.resolve())!=_||Cn&&we(new Cn)!=J||wn&&we(new wn)!=ne)&&(we=function(e){var n=en(e),t=n==p?e.constructor:void 0,o=t?ze(t):"";if(o)switch(o){case On:return Q;case Ln:return z;case et:return _;case nt:return J;case tt:return ne}return n});function Pt(e,n){return n=n??a,!!n&&(typeof e=="number"||le.test(e))&&e>-1&&e%1==0&&e<n}function Nt(e){var n=typeof e;return n=="string"||n=="number"||n=="symbol"||n=="boolean"?e!=="__proto__":e===null}function kt(e){return!!Qe&&Qe in e}function Ht(e){var n=e&&e.constructor,t=typeof n=="function"&&n.prototype||xe;return e===t}function Gt(e){return He.call(e)}function ze(e){if(e!=null){try{return ke.call(e)}catch{}try{return e+""}catch{}}return""}function En(e,n){return e===n||e!==e&&n!==n}var Ut=An(function(){return arguments}())?An:function(e){return nn(e)&&P.call(e,"callee")&&!Ze.call(e,"callee")},dn=Array.isArray;function Wt(e){return e!=null&&Fn(e.length)&&!Bn(e)}var Tn=an||$t;function Kt(e,n){return In(e,n)}function Bn(e){if(!Pn(e))return!1;var n=en(e);return n==D||n==b||n==A||n==K}function Fn(e){return typeof e=="number"&&e>-1&&e%1==0&&e<=a}function Pn(e){var n=typeof e;return e!=null&&(n=="object"||n=="function")}function nn(e){return e!=null&&typeof e=="object"}var Nn=ce?pn(ce):It;function Vt(e){return Wt(e)?vt(e):Dt(e)}function Rt(){return[]}function $t(){return!1}r.exports=Kt}(tn,tn.exports)),tn.exports}var br=hr();const xr=qt(br);/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const yr=$("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"})(({odysseyDesignTokens:r})=>({display:"flex",gap:r.Spacing2})),Cr=({data:r,menuItems:u,rowSelection:f,setRowSelection:c})=>{const m=rn(),{t:l}=Fe(),a=Object.values(f).filter(Boolean).length,d=s.useCallback(()=>{const A=Object.fromEntries(r.map(C=>[C.id,!0]));c(A)},[r,c]),y=s.useCallback(()=>{c({})},[c]);return i.jsxs(yr,{odysseyDesignTokens:m,children:[a>0&&i.jsx(We,{ariaLabel:l("table.actions.arialabel"),buttonLabel:l("table.actions.selectsome",{selectedRowCount:a}),buttonVariant:"primary",endIcon:i.jsx(mn,{}),children:u==null?void 0:u(f)}),i.jsxs(Te,{children:[i.jsx(_n,{isDisabled:a===r.length,label:l("table.actions.selectall"),onClick:d,variant:"secondary"}),i.jsx(_n,{isDisabled:a===0,label:l("table.actions.selectnone"),onClick:y,variant:"secondary"})]})]})},$n=s.memo(Cr);$n.displayName="BulkActionsMenu";const wr=$("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"})(({odysseyDesignTokens:r})=>({marginBlockStart:`-${r.Spacing1}`})),Sr=$(Wn)(()=>({visibility:"hidden"})),Tr=({children:r,description:u,detailPanel:f,hasSelection:c,image:m,isSelected:l,onSelectionChange:a,overline:d,title:y,variant:A,menuButtonChildren:C})=>{const T=rn(),{t:w}=Fe(),D=s.useId(),[b,z]=s.useState(!1),U=s.useMemo(()=>i.jsx(wr,{odysseyDesignTokens:T,children:i.jsx(Un,{checked:l,inputProps:{"aria-labelledby":D},onChange:a})}),[l,T,a,D]),q=s.useMemo(()=>f?i.jsx(ar,{title:w(b?"table.rowexpansion.collapse":"table.rowexpansion.expand"),children:i.jsx(Wn,{"aria-label":w(b?"table.rowexpansion.collapse":"table.rowexpansion.expand"),children:b?i.jsx(sr,{}):i.jsx(mn,{}),onClick:()=>z(!b)})}):i.jsx(Sr,{disabled:!0,children:i.jsx(mn,{})}),[b,f,w]),p=s.useMemo(()=>i.jsxs(i.Fragment,{children:[c&&U,q]}),[q,U,c]);return i.jsx(ir,{__role:"listitem",accessory:p,children:r,description:u,detailPanel:b&&f,image:m,menuButtonChildren:C,overline:d,title:y,titleId:D,variant:A})},qn=s.memo(Tr);qn.displayName="DataCard";/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const _r=({isRowReorderingDisabled:r,row:u,rowActionMenuItems:f,rowIndex:c,totalRows:m,updateRowOrder:l})=>{const{t:a}=Fe(),d=u.original?u.original:u,y=s.useCallback(()=>{l&&l({rowId:d.id,newRowIndex:0})},[d.id,l]),A=s.useCallback(()=>{l&&l({rowId:d.id,newRowIndex:Math.max(0,c-1)})},[d.id,c,l]),C=s.useCallback(()=>{l&&l({rowId:d.id,newRowIndex:c+1})},[d.id,c,l]),T=s.useCallback(()=>{l&&l({rowId:d.id,newRowIndex:m?m-1:c})},[d.id,c,m,l]);return i.jsxs(i.Fragment,{children:[f&&f(d),f&&l&&i.jsx("hr",{}),l&&i.jsxs(i.Fragment,{children:[i.jsxs(Be,{isDisabled:c<=0||r,onClick:y,children:[i.jsx(or,{})," ",a("table.reorder.tofront")]}),i.jsxs(Be,{isDisabled:c<=0||r,onClick:A,children:[i.jsx(lr,{})," ",a("table.reorder.forward")]}),i.jsxs(Be,{isDisabled:(m?c>=m-1:!1)||r,onClick:C,children:[i.jsx(Kn,{})," ",a("table.reorder.backward")]}),m&&i.jsxs(Be,{isDisabled:c>=m-1||r,onClick:T,children:[i.jsx(cr,{})," ",a("table.reorder.toback")]})]})]})},Mn=s.memo(_r);Mn.displayName="RowActions";/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const vr=$("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"&&r!=="currentLayout"&&r!=="maxGridColumns"})(({odysseyDesignTokens:r,currentLayout:u,maxGridColumns:f})=>({display:u==="list"?"flex":"grid",flexDirection:"column",columnGap:r.Spacing5,...u==="grid"&&{"@media (max-width: 720px)":{gridTemplateColumns:"repeat(1, 1fr)"},"@media (min-width: 720px) and (max-width: 960px)":{gridTemplateColumns:"repeat(2, 1fr)"},"@media (min-width: 960px)":{gridTemplateColumns:`repeat(${f}, 1fr)`}}})),Mr=$("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"})(({odysseyDesignTokens:r})=>({display:"flex",alignItems:"center",justifyContent:"center",width:"100%",paddingBlock:r.Spacing5})),jr=({cardLayoutOptions:r,currentIndex:u,handleRowSelectionChange:f,hasRowReordering:c,hasRowSelection:m,isRowReorderingDisabled:l,onReorderRows:a,row:d,rowReorderingUtilities:y,rowSelection:A,totalRows:C})=>{const{overline:T,title:w,description:D,image:b,children:z,variant:U}=r.itemProps(d),q=s.useCallback(()=>f(d),[f,d]),p=s.useMemo(()=>{var K;return(K=r.renderDetailPanel)==null?void 0:K.call(r,{row:d})},[r,d]),_=s.useMemo(()=>r.rowActionMenuItems||c?i.jsx(Mn,{isRowReorderingDisabled:l,row:d,rowActionMenuItems:r.rowActionMenuItems,rowIndex:u,totalRows:C,updateRowOrder:c&&a?y.updateRowOrder:void 0}):null,[r.rowActionMenuItems,u,c,l,a,d,y,C]);return i.jsx(qn,{children:z,description:D,detailPanel:p,hasSelection:m,image:b,isSelected:A[d.id]??!1,menuButtonChildren:_,onSelectionChange:q,overline:T,title:w,variant:U},d.id)},Jn=s.memo(jr);Jn.displayName="RowDataCard";const Ar=({currentLayout:r,data:u,emptyState:f,hasRowReordering:c,hasRowSelection:m,isEmpty:l,isLoading:a,isNoResults:d,isRowReorderingDisabled:y,onReorderRows:A,pagination:C,rowReorderingUtilities:T,rowSelection:w,setRowSelection:D,cardLayoutOptions:b,totalRows:z})=>{const U=rn(),q=s.useCallback(p=>{D(_=>Object.fromEntries(p.id in _?Object.entries(_).filter(([K])=>K!==p.id):Object.entries(_).concat([[p.id,!0]])))},[D]);return i.jsx(Te,{children:a?i.jsx(Mr,{odysseyDesignTokens:U,children:i.jsx(rr,{})}):i.jsx(i.Fragment,{children:!u||u.length===0||l||d?i.jsx(Te,{children:f}):i.jsx(vr,{currentLayout:r,maxGridColumns:b.maxGridColumns??3,odysseyDesignTokens:U,role:"list",children:u.map((p,_)=>{const K=_+(C.pageIndex-1)*C.pageSize;return i.jsx(Jn,{cardLayoutOptions:b,currentIndex:K,handleRowSelectionChange:q,hasRowReordering:c,hasRowSelection:m,isRowReorderingDisabled:y,onReorderRows:A,row:p,rowReorderingUtilities:T,rowSelection:w,totalRows:z},p.id)})})})})},Qn=s.memo(Ar);Qn.displayName="CardLayoutContent";/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const Ir=async({dataQueryParams:r,errorMessageProp:u,getData:f,setData:c,setErrorMessage:m,setIsLoading:l})=>{l==null||l(!0),m(u);try{const a=await(f==null?void 0:f(r));c(a)}catch(a){m(typeof a=="string"?a:er("table.error"))}finally{l==null||l(!1)}};/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const Dr=({availableLayouts:r,currentLayout:u,setCurrentLayout:f})=>{const{t:c}=Fe(),m=s.useCallback(a=>{f(a)},[f]),l=s.useMemo(()=>r.map(a=>({value:a,onClick:()=>m(a),label:c(`dataview.layout.${a}`)})),[r,m,c]);return i.jsx(We,{ariaLabel:c("dataview.layout.arialabel"),buttonLabel:c(`dataview.layout.${u}`),menuAlignment:"right",shouldCloseOnSelect:!1,children:l.map(({value:a,onClick:d,label:y})=>i.jsx(Be,{isSelected:u===a,onClick:d,children:y},a))})},Xn=s.memo(Dr);Xn.displayName="LayoutSwitcher";/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const zr={enableColumnActions:!1,enableDensityToggle:!1,enableExpandAll:!1,enableFilters:!1,enableFullScreenToggle:!1,enableGlobalFilter:!1,enableHiding:!1,enablePagination:!1,layoutMode:"grid-no-grow",manualFiltering:!0,manualSorting:!0,muiTablePaperProps:{elevation:0,sx:{overflow:"visible"}},positionActionsColumn:"last",rowVirtualizerOptions:{overscan:4},selectAllMode:"all"},Er={"mrt-row-drag":{header:"",muiTableBodyCellProps:{sx:{minWidth:0,width:"auto"},className:"ods-drag-handle"},muiTableHeadCellProps:{sx:{minWidth:0,width:"auto"},children:i.jsx(Te,{sx:{marginInline:"-0.1rem"},children:i.jsx(Vn,{sx:{marginInline:1,opacity:0}})})}},"mrt-row-select":{muiTableHeadCellProps:{padding:"checkbox"},muiTableBodyCellProps:{padding:"checkbox"}},"mrt-row-expand":{header:"",muiTableBodyCellProps:{sx:{overflow:"visible"}}}},Br=$("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"&&r!=="isScrollableStart"&&r!=="isScrollableEnd"})(({odysseyDesignTokens:r,isScrollableStart:u,isScrollableEnd:f})=>({marginBlockEnd:r.Spacing4,position:"relative",borderInlineStartColor:u?r.HueNeutral200:"transparent",borderInlineStartStyle:"solid",borderInlineStartWidth:r.BorderWidthMain,"::before":{background:"linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",content:'""',opacity:u?"0.075":"0",pointerEvents:"none",position:"absolute",top:0,left:0,bottom:0,width:r.Spacing6,zIndex:100,transition:`opacity ${r.TransitionDurationMain} ${r.TransitionTimingMain}`},borderInlineEndColor:f?r.HueNeutral200:"transparent",borderInlineEndStyle:"solid",borderInlineEndWidth:r.BorderWidthMain,"::after":{background:"linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(0, 0, 0, 1) 100%)",content:'""',opacity:f?"0.075":"0",pointerEvents:"none",position:"absolute",top:0,right:0,bottom:0,width:r.Spacing6,transition:`opacity ${r.TransitionDurationMain} ${r.TransitionTimingMain}`}}));/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const Fr=$("div")({whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"}),Pr=$("div")({display:"flex"}),Nr=({columns:r,data:u,draggingRow:f,emptyState:c,enableVirtualization:m,getRowId:l,hasRowReordering:a,hasRowSelection:d,isEmpty:y,isLoading:A,isNoResults:C,isRowReorderingDisabled:T,onReorderRows:w,pagination:D,rowReorderingUtilities:b,rowSelection:z,setRowSelection:U,setTableState:q,tableLayoutOptions:p,tableState:_,totalRows:K})=>{const[me,J]=s.useState(!0),[ee,Ke]=s.useState(!0),[_e,ne]=s.useState("100%"),ae=s.useRef(!1),Q=s.useRef(null),te=s.useRef(null),re=s.useRef(null);Xt({setIsTableContainerScrolledToEnd:Ke,setIsTableContainerScrolledToStart:J,setTableInnerContainerWidth:ne,tableInnerContainer:te.current,tableOuterContainer:Q.current});const O=rn(),{t:k}=Fe(),pe=s.useMemo(()=>r.map(h=>h.accessorKey)??[],[r]),Pe=s.useMemo(()=>["mrt-row-drag","mrt-row-select","mrt-row-expand",...(pe==null?void 0:pe.filter(h=>typeof h=="string"))||[],"mrt-row-actions"],[pe]),E=s.useMemo(()=>_.rowDensity==="spacious"?"MuiTableBody-spacious":_.rowDensity==="compact"?"MuiTableBody-compact":"MuiTableBody-default",[_]),oe=s.useCallback(({cell:h})=>{const F=h.getValue();return h.column.columnDef.hasTextWrapping||h.column.columnDef.enableWrapping?F:i.jsx(Fr,{children:F})},[]),{draggableTableBodyRowClassName:Ve,dragHandleStyles:Re,dragHandleText:he,handleDragHandleKeyDown:le,handleDragHandleOnDragCapture:x,handleDragHandleOnDragEnd:X,resetDraggingAndHoveredRow:$e,updateRowOrder:v}=b,ve=s.useCallback(({row:h})=>{var V;const F=h.index+(D.pageIndex-1)*D.pageSize;return i.jsxs(Pr,{children:[(V=p.rowActionButtons)==null?void 0:V.call(p,h.original),(p.rowActionMenuItems||a)&&i.jsx(We,{ariaLabel:k("table.moreactions.arialabel"),buttonVariant:"floating",endIcon:i.jsx(vn,{}),menuAlignment:"right",size:"small",children:i.jsx(Mn,{isRowReorderingDisabled:T,row:h,rowActionMenuItems:p.rowActionMenuItems,rowIndex:F,totalRows:K,updateRowOrder:a&&w?v:void 0})})]})},[a,T,w,D.pageIndex,D.pageSize,k,p,K,v]),ie=s.useMemo(()=>({width:_e}),[_e]),Me=s.useCallback(()=>i.jsx(Te,{sx:ie,children:c}),[ie,c]);s.useEffect(()=>{m&&(ae.current=!0)},[m,D]),s.useEffect(()=>{var h,F;ae.current&&re.current&&typeof((h=te.current)==null?void 0:h.scrollTo)<"u"&&((F=te.current)==null||F.scrollTo(0,re.current.clientHeight),ae.current=!1)},[u]);const W=s.useMemo(()=>!!(a===!0&&w||p.rowActionButtons||p.rowActionMenuItems),[a,w,p.rowActionButtons,p.rowActionMenuItems]),be=r.some(h=>h.grow===!0),ce=gr({data:!y&&!C?u:[],columns:r,getRowId:l,state:{sorting:_.columnSorting,columnVisibility:_.columnVisibility,isLoading:A,rowSelection:z,columnOrder:Pe},icons:{ArrowDownwardIcon:Kn,DragHandleIcon:Vn,SyncAltIcon:dr,ExpandMoreIcon:mn},...zr,displayColumnDefOptions:{...Er,"mrt-row-actions":{header:"",grow:!be,muiTableBodyCellProps:{align:"right",sx:{overflow:"visible",width:"unset"},className:"ods-actions-cell"},muiTableHeadCellProps:{align:"right",sx:{width:"unset"},className:"ods-actions-cell",children:i.jsxs(Te,{sx:{display:"flex",visibility:"hidden"},children:[p.rowActionButtons&&p.rowActionButtons(),(a===!0&&w||p.rowActionMenuItems)&&i.jsx(Te,{children:i.jsx(_n,{ariaLabel:k("table.moreactions.arialabel"),endIcon:i.jsx(vn,{}),isDisabled:!0,size:"small",variant:"floating"})})]})}}},muiTableProps:{ref:re,className:!W&&p.hasColumnResizing?be?"ods-hide-spacer-column":"ods-hide-spacer-column ods-column-grow":""},muiTableContainerProps:{ref:te},muiTableBodyProps:()=>({className:E,tabIndex:0,sx:y||C?{height:"unset"}:void 0}),enableColumnResizing:p.hasColumnResizing,defaultColumn:{Cell:oe},enableRowActions:!!(a===!0&&w||p.rowActionButtons||p.rowActionMenuItems),renderRowActions:({row:h})=>ve({row:h}),enableRowOrdering:a&&!!w,enableRowDragging:a&&!!w,muiDetailPanelProps:({row:h})=>({sx:{paddingBlock:h.getIsExpanded()?`${O.Spacing3} !important`:void 0}}),muiTableBodyRowProps:({table:h,row:F,isDetailPanel:V})=>{var se;return{className:Ve({currentRowId:F.id,draggingRowId:f==null?void 0:f.id,hoveredRowId:(se=h.getState().hoveredRow)==null?void 0:se.id}),sx:V?{paddingBlock:"0 !important",border:0,"&:hover":{backgroundColor:`${O.HueNeutralWhite} !important`}}:{}}},muiRowDragHandleProps:({table:h,row:F})=>({onKeyDown:V=>le({table:h,row:F,event:V}),onBlur:()=>$e(h),onDragEnd:()=>X(h),onDragCapture:()=>x(h),disabled:T,sx:Re,...he}),renderDetailPanel:p.renderDetailPanel,enableRowVirtualization:m,muiTableHeadCellProps:({column:h})=>({className:_.columnSorting.find(F=>F.id===h.id)?"isSorted":"isUnsorted"}),muiTableBodyCellProps:({column:h})=>({className:h.getIsResizing()?"isResizing":""}),enableSorting:p.hasSorting===!0,onSortingChange:h=>{const F=typeof h=="function"?h(_.columnSorting):_.columnSorting;q(V=>({...V,columnSorting:F}))},enableRowSelection:d,onRowSelectionChange:U,renderEmptyRowsFallback:Me,localization:{collapse:k("table.rowexpansion.collapse"),collapseAll:k("table.rowexpansion.collapseall"),expand:k("table.rowexpansion.expand"),expandAll:k("table.rowexpansion.expandall")}});return i.jsx(Br,{isScrollableEnd:!ee,isScrollableStart:!me,odysseyDesignTokens:O,ref:Q,children:i.jsx(mr,{table:ce})})},Yn=s.memo(Nr);Yn.displayName="TableLayoutContent";const kr=({setTableState:r,tableLayoutOptions:u,tableState:f})=>{const{t:c}=Fe(),{hasChangeableDensity:m,hasColumnVisibility:l,columns:a}=u,{rowDensity:d,columnVisibility:y}=f,A=s.useCallback(b=>{r(z=>({...z,rowDensity:b}))},[r]),C=s.useCallback(b=>{r(z=>({...z,columnVisibility:{...z.columnVisibility,[b]:z.columnVisibility?z.columnVisibility[b]===!1:!1}}))},[r]),T=s.useMemo(()=>new Set(a.filter(b=>y?y[b.accessorKey]!==!1:!0).map(b=>b.accessorKey)),[a,y]),w=s.useMemo(()=>m&&i.jsx(We,{ariaLabel:c("table.density.arialabel"),endIcon:i.jsx(ur,{}),menuAlignment:"right",shouldCloseOnSelect:!1,children:Rn.map(b=>i.jsx(Be,{isSelected:d===b,onClick:()=>A(b),children:c(`table.density.${b}`)},b))}),[m,c,d,A]),D=s.useMemo(()=>l&&i.jsx(We,{ariaLabel:c("table.columnvisibility.arialabel"),endIcon:i.jsx(pr,{}),menuAlignment:"right",shouldCloseOnSelect:!1,children:a.filter(b=>b.enableHiding!==!1).map(b=>i.jsxs(Be,{onClick:()=>C(b.id),children:[i.jsx(Un,{checked:T.has(b.id)}),b.header]},b.accessorKey))}),[l,c,a,C,T]);return i.jsxs(i.Fragment,{children:[w,D]})},Zn=s.memo(kr);Zn.displayName="TableSettings";/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const Gn=({columns:r,filters:u})=>{const f=s.useCallback(l=>l==null?void 0:l.map(a=>typeof a=="string"?{label:a,value:a}:{label:a.label??a.value,value:a.value??a.label}),[]),c=s.useCallback(l=>l.enableColumnFilter!==!1&&l.accessorKey?{id:l.accessorKey,label:l.header,variant:l.filterVariant,options:f(l.filterSelectOptions)}:null,[f]);return s.useMemo(()=>(u||r||[]).reduce((a,d)=>{if(typeof d=="string"){const y=r==null?void 0:r.find(C=>C.accessorKey===d),A=y&&c(y);return A?a.concat(A):a}if("accessorKey"in d){const y=c(d);return y?a.concat(y):a}return"label"in d?a.concat(d):a},[]),[r,c,u])};/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const Hr=$("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"})(({odysseyDesignTokens:r})=>({display:"flex",flexDirection:"column",gap:r.Spacing4})),Gr=$("div")(()=>({display:"flex",justifyContent:"space-between"})),Ur=$("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"})(({odysseyDesignTokens:r})=>({display:"flex",justifyContent:"flex-end",gap:r.Spacing2})),Wr=$("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"})(({odysseyDesignTokens:r})=>({display:"flex",alignItems:"center",gap:r.Spacing2})),Kr=$("div",{shouldForwardProp:r=>r!=="odysseyDesignTokens"})(({odysseyDesignTokens:r})=>({marginInlineEnd:r.Spacing2})),Vr=({additionalActionButton:r,additionalActionMenuItems:u,availableLayouts:f=fr,bulkActionMenuItems:c,currentPage:m=1,emptyPlaceholder:l,enableVirtualization:a,errorMessage:d,filters:y,getData:A,getRowId:C,hasFilters:T,hasPagination:w,hasPageInput:D,hasRowCountInput:b,hasRowCountLabel:z,hasSearch:U,hasSearchSubmitButton:q,hasRowReordering:p,hasRowSelection:_,initialLayout:K,isEmpty:me,isLoading:J,isNoResults:ee,isPaginationMoreDisabled:Ke,isRowReorderingDisabled:_e,metaText:ne,noResultsPlaceholder:ae,onChangeRowSelection:Q,onReorderRows:te,onRowSelectionChange:re,paginationType:O="paged",resultsPerPage:k=20,searchDelayTime:pe,cardLayoutOptions:Pe,tableLayoutOptions:E,totalRows:oe,maxPages:Ve,maxResultsPerPage:Re,onPaginationChange:he})=>{const le=rn(),{t:x}=Fe(),[X,$e]=s.useState(K??f[0]),[v,ve]=s.useState([]),[ie,Me]=s.useState(J??!0),[W,be]=s.useState(me??!0),[ce,h]=s.useState(ee??!1),[F,V]=s.useState(d),[se,pn]=s.useState(""),[qe,hn]=s.useState(y),[Ne,bn]=s.useState(y),[Je,xn]=s.useState(),[de,xe]=s.useState({});s.useEffect(()=>{Q==null||Q(de)},[de,Q]),s.useEffect(()=>{re==null||re(de)},[de,re]);const[B,ke]=s.useState({pageIndex:m,pageSize:k}),[P,Qe]=s.useState({columnSorting:[],columnVisibility:{},rowDensity:(E==null?void 0:E.initialDensity)??Rn[0]}),He=U||T||r||u,ye=Gn({filters:Ne,columns:E==null?void 0:E.columns}),Xe=Gn({filters:qe,columns:E==null?void 0:E.columns});s.useEffect(()=>{!qe&&ye&&hn(ye)},[ye,qe]);const je=s.useMemo(()=>({page:B.pageIndex,resultsPerPage:B.pageSize,search:se,filters:ye,sort:P==null?void 0:P.columnSorting}),[B.pageIndex,B.pageSize,se,ye,P==null?void 0:P.columnSorting]),Ye=s.useCallback((M,Oe,Ae)=>C?C(M,Oe,Ae):M.id?M.id:Qt(),[C]);s.useEffect(()=>{ke({pageIndex:m,pageSize:k})},[m,k]),s.useEffect(()=>{ke(M=>({pageIndex:1,pageSize:O=="loadMore"?k:M.pageSize}))},[Ne,O,k,se]),s.useEffect(()=>{he==null||he(B)},[he,B]),s.useEffect(()=>{Ir({dataQueryParams:je,errorMessageProp:d,getData:A,setData:ve,setErrorMessage:V,setIsLoading:J?void 0:Me})},[je,d,A,J]),s.useEffect(()=>{const M=!T||xr(Ne,Xe);be(B.pageIndex===m&&B.pageSize===k&&se===""&&M&&v.length===0)},[m,v,Ne,T,Xe,B,k,se]),s.useEffect(()=>{if(!ie){const M=!W&&v.length===0;h(ee??M)}},[v.length,W,ee,ie]),s.useEffect(()=>{Me(M=>J??M)},[J]),s.useEffect(()=>{be(M=>me??M)},[me]),s.useEffect(()=>{h(M=>ee??M)},[ee]);const Ze=s.useMemo(()=>{const M=ae||i.jsx(Lt,{description:x("table.noresults.text"),heading:x("table.noresults.heading")});if(W)return l||M;if(ce)return M},[ae,x,W,ce,l]),Ge=s.useMemo(()=>{const M=X==="table"&&E&&(E.hasColumnVisibility||E.hasChangeableDensity);return(ne||M||f.length>1||r||u)&&i.jsxs(Wr,{odysseyDesignTokens:le,children:[ne&&i.jsx(Kr,{odysseyDesignTokens:le,children:i.jsx(nr,{color:"textSecondary",children:ne})}),M&&i.jsx(Zn,{setTableState:Qe,tableLayoutOptions:E,tableState:P}),f.length>1&&i.jsx(Xn,{availableLayouts:f,currentLayout:X,setCurrentLayout:$e}),r,u&&i.jsx(We,{ariaLabel:x("table.moreactions.arialabel"),buttonVariant:"secondary",endIcon:i.jsx(vn,{}),menuAlignment:"right",children:u})]})},[r,u,f,X,ne,le,E,P,x]),ue=s.useMemo(()=>a??O==="loadMore",[a,O]),{lastRow:sn}=Yt({currentRowsCount:v.length,pageIndex:B.pageIndex,pageSize:B.pageSize,totalRows:oe}),an=Zt({totalRows:oe,onReorderRows:te,data:v,setData:ve,draggingRow:Je,setDraggingRow:xn,resultsPerPage:B.pageSize,page:B.pageIndex});return i.jsxs(Hr,{odysseyDesignTokens:le,children:[F&&i.jsx(Te,{children:i.jsx(Jt,{severity:"error",text:F})}),He&&i.jsx(tr,{additionalActions:Ge,filters:T?ye:void 0,hasSearchSubmitButton:q,isDisabled:W,onChangeFilters:T?bn:void 0,onChangeSearch:U?pn:void 0,searchDelayTime:pe}),(c||_)&&i.jsxs(Gr,{children:[i.jsx($n,{data:v,menuItems:c,rowSelection:de,setRowSelection:xe}),!He&&Ge]}),!He&&!c&&!_&&Ge&&i.jsx(Ur,{odysseyDesignTokens:le,children:Ge}),X==="table"&&E&&i.jsx(Yn,{columns:E.columns,data:v,draggingRow:Je,emptyState:Ze,enableVirtualization:ue,getRowId:C||Ye,hasRowReordering:p,hasRowSelection:_,isEmpty:W,isLoading:ie,isNoResults:ce,isRowReorderingDisabled:_e,onReorderRows:te,pagination:B,rowReorderingUtilities:an,rowSelection:de,setRowSelection:xe,setTableState:Qe,tableLayoutOptions:E,tableState:P,totalRows:oe}),(X==="list"||X==="grid")&&Pe&&i.jsx(Qn,{cardLayoutOptions:Pe,currentLayout:X,data:v,draggingRow:Je,emptyState:Ze,getRowId:C||Ye,hasRowReordering:p,hasRowSelection:_,isEmpty:W,isLoading:ie,isNoResults:ce,isRowReorderingDisabled:_e,onReorderRows:te,pagination:B,rowReorderingUtilities:an,rowSelection:de,setRowSelection:xe,totalRows:oe}),w&&i.jsx(Ot,{currentPageLabel:x("pagination.page"),currentRowsCount:v.length,hasPageInput:D,hasRowCountInput:b,hasRowCountLabel:z,isDisabled:W,isMoreDisabled:Ke,lastRow:sn,loadMoreLabel:x("pagination.loadmore"),maxPageIndex:Ve,maxPageSize:Re,nextLabel:x("pagination.next"),onPaginationChange:ke,pageIndex:B.pageIndex,pageSize:B.pageSize,previousLabel:x("pagination.previous"),rowsPerPageLabel:x("pagination.rowsperpage"),totalRows:oe,variant:O})]})},Rr=s.memo(Vr);Rr.displayName="DataView";export{Rr as M};

package/dist/assets/DataView-C1SHLIDp.js

@@ -0,0 +1,332 @@
+import{j as e}from"./iframe-CQjT1fxh.js";import{useMDXComponents as r}from"./index-D5BUEpVX.js";import{M as a,T as s,S as l,D as d,C as c}from"./blocks-D521Uej3.js";import{D as i,a as h}from"./DataView.stories-CzFmgLtp.js";import"./preload-helper-Dp1pzeXC.js";import"./index-C77ZwfYm.js";import"./index-5Qx3hCfP.js";import"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./tableRowClasses-Bk1uFtwh.js";import"./WarningFilled-DOHs-JmZ.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./personData-CV-uVWcJ.js";import"./Status-DyDCzqET.js";import"./MuiPropsContext-D6i6qZME.js";import"./Chip-BgPaZbUf.js";import"./createSvgIcon-CaWcxZng.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./ButtonBase-Rz8p08Xo.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./Box-B3rdnavX.js";import"./Box-CnVllI1S.js";import"./EmptyState-B1EvR4rn.js";import"./Typography-CjpHjc10.js";import"./Typography-Jr4Brrb5.js";import"./Button-0PI4ljbj.js";import"./BaseButton-C9tiChQu.js";import"./Tooltip-B-PXZNTK.js";import"./Tooltip-yxN-KFjL.js";import"./Grow-DvH-Xu1P.js";import"./utils-D-QCjykO.js";import"./Portal-DeJFqeW-.js";import"./resolveComponentProps-DGxe9oED.js";import"./isHostComponent-DVu5iVWx.js";import"./useControlled-BUhC7uWK.js";import"./Popper-CISS1LuJ.js";import"./ownerDocument-DW-IO8s5.js";import"./Button-Dug4qNr3.js";import"./MenuItem-Cmq8TfUJ.js";import"./MenuContext-UsOwIWpO.js";import"./MenuItem-CpMFWgaz.js";import"./List-D0N4Xybp.js";import"./constants-CGUp4oSR.js";import"./DataView-BS0E464o.js";import"./MenuButton-BffESdH9.js";import"./BaseMenuButton-BXkyi9Y-.js";import"./useUniqueId-DG6rB8dI.js";import"./createUniqueId-BHjR7HQF.js";import"./More-BAN0OFVF.js";import"./Menu-DB2s3Jn0.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Modal-C5P7v6Gt.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./createChainedFunction-BO_9K8Jh.js";import"./Fade-ZBabHGDm.js";import"./Paper-vUVrw-QB.js";import"./MenuList-D3GSt85L.js";import"./Callout-WJN7MCgu.js";import"./Link-Cg_KakDo.js";import"./Link-thynTosX.js";import"./ExternalLink-3_gWbh_U.js";import"./AlertTitle-UQV7DT5q.js";import"./useSlot-BMAKysxJ.js";import"./Close-CELHOmN_.js";import"./IconButton-BPR_sq0F.js";import"./useScrollIndication-BGw7dgC5.js";import"./ArrowRight-C5USrGY5.js";import"./InputBase-BYnzr12H.js";import"./FormHelperText-CVc1kPQJ.js";import"./ListItem-BNz1zv6N.js";import"./FormLabel-CWWbs_c2.js";import"./DataFilters-4og6bOFS.js";import"./Autocomplete-BwSwXNq_.js";import"./useAutocomplete-DG_kuhWb.js";import"./index.esm-Dvk_qjX0.js";import"./Field-CqIOaZfg.js";import"./ScreenReaderText-toqV93JE.js";import"./visuallyHidden-Dan1xhjv.js";import"./FieldHint-Cs73lQge.js";import"./inputUtils-BBH9ADKa.js";import"./Autocomplete-BajR4gNT.js";import"./ArrowDropDown-BbLKA4fg.js";import"./ListSubheader-Dwx7m0BA.js";import"./Checkbox-3Yu84dfy.js";import"./Hint-BXue9c6p.js";import"./FormControlLabel-BG9mNqQc.js";import"./Stack-Duw-TXBf.js";import"./createStyled-BKWdp2xc.js";import"./useThemeProps-BCUqwy59.js";import"./Checkbox-mRntsWEy.js";import"./SwitchBase-C_6ALR3v.js";import"./CheckboxGroup-Bris2fCF.js";import"./FormGroup-D8ZDwdpx.js";import"./Radio-BlxlCYZY.js";import"./Radio-C5-GzJtb.js";import"./RadioGroup-sL620ofZ.js";import"./RadioGroup-BcwUBGJo.js";import"./SearchField-DmDpB-Sd.js";import"./InputAdornment-Clfg5IS6.js";import"./Search-0744_rm_.js";import"./Tag-CYK8pNzu.js";import"./TagList-CunLkaIS.js";import"./TextField-DF5R_omM.js";import"./Filter-XcwxIcdg.js";import"./ChevronRight-QYu5EQHS.js";import"./CircularProgress-B7sj16Me.js";import"./CircularProgress-D6L1y9kt.js";import"./Card-CYHxgfcj.js";import"./Skeleton-DxFSebyW.js";import"./colorManipulator-BYcVMQmD.js";import"./CardActions-AjPk7ICQ.js";import"./CardActionArea-CjEHgWqq.js";import"./ChevronUp-D226bAv0.js";import"./List-CZ2bN2bA.js";import"./index.esm-Bohtd3OQ.js";import"./DialogContent-C6DlqjnA.js";import"./dialogActionsClasses-J0iu7jYO.js";import"./DialogTitle-B_QxN4PO.js";import"./useMobilePicker-DJQJ3D8W.js";import"./Select-DE0mojaE.js";import"./useThemeProps-Bc2iWdri.js";import"./Collapse-DULszxZp.js";import"./LinearProgress-Z53mwHnp.js";import"./Divider-C7lvc1xB.js";import"./tableSortLabelClasses-i_d6KGQQ.js";import"./DateTimePicker-ByepBMwy.js";import"./Tabs-BPWnyCAU.js";import"./DatePicker-vZfA4IWy.js";import"./Show-C6ORd-wr.js";import"./Refresh-ZZ_nNcXg.js";function o(t){const n={blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{of:i}),`
+`,e.jsx(s,{of:i}),`
+`,e.jsx(l,{of:i}),`
+`,e.jsx(d,{of:i}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"DataView"})," is a powerful and flexible way to display and interact with data in various formats. It includes the ability to display data as a table, card list, or card grid, and can be used to create complex data representations with features like filtering, sorting, pagination, and more."]}),`
+`,e.jsx(n.h2,{id:"overview",children:"Overview"}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"DataView"})," was originally just a table, built on top of Material-React-Table v2 (MRT) and modified to provide additional functionality and styling to match the Okta Odyssey design system. Now it provides two additional view modes, and is designed to be easy to set up while remaining highly customizable to meet diverse data display needs."]}),`
+`,e.jsx(n.h2,{id:"getting-started",children:"Getting Started"}),`
+`,e.jsxs(n.p,{children:["To use the ",e.jsx(n.code,{children:"DataView"}),", you'll need to provide at minimum a ",e.jsx(n.code,{children:"getData"})," function. Here's a basic example:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { DataView, DataViewProps } from "@okta/odyssey-react-mui/labs";
+import { columns, data } from "./yourDataFile";
+
+const YourComponent = () => {
+  const getData = useCallback(
+    ({ ...props }: DataGetDataType) => {
+      return filterData({ data, ...props });
+    },
+    [data],
+  );
+
+  return (
+    <DataView
+      getData={getData}
+      hasRowSelection
+      hasPagination
+      hasFilters
+      hasSearch
+    />
+  );
+};
+`})}),`
+`,e.jsx(n.p,{children:"This will create a fully functional data view with filtering, searching, and pagination capabilities."}),`
+`,e.jsx(n.h2,{id:"key-features",children:"Key Features"}),`
+`,e.jsx(n.h3,{id:"layouts",children:"Layouts"}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"DataView"})," supports multiple layouts:"]}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:"Table: A traditional tabular layout"}),`
+`,e.jsx(n.li,{children:"List: A vertical stack of cards"}),`
+`,e.jsx(n.li,{children:"Grid: A grid of cards"}),`
+`]}),`
+`,e.jsxs(n.p,{children:["You can control available layouts using the ",e.jsx(n.code,{children:"availableLayouts"})," prop:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  availableLayouts={["table", "list", "grid"]}
+  // ... other props
+/>
+`})}),`
+`,e.jsxs(n.p,{children:["If you only include one layout in the array, the ",e.jsx(n.code,{children:"DataView"})," will be locked to that layout and won't present the UI for changing it."]}),`
+`,e.jsx(n.h3,{id:"filtering-and-searching",children:"Filtering and Searching"}),`
+`,e.jsxs(n.p,{children:["Enable filtering and searching with the ",e.jsx(n.code,{children:"hasFilters"})," and ",e.jsx(n.code,{children:"hasSearch"})," props:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  hasFilters
+  hasSearch
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.h3,{id:"pagination",children:"Pagination"}),`
+`,e.jsxs(n.p,{children:["Control pagination with the ",e.jsx(n.code,{children:"hasPagination"}),", ",e.jsx(n.code,{children:"paginationType"}),", ",e.jsx(n.code,{children:"currentPage"}),", and ",e.jsx(n.code,{children:"resultsPerPage"})," props:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  hasPagination
+  paginationType="paged"
+  currentPage={1}
+  resultsPerPage={20}
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.h3,{id:"row-selection",children:"Row Selection"}),`
+`,e.jsxs(n.p,{children:["Enable row selection with the ",e.jsx(n.code,{children:"hasRowSelection"})," prop and handle selection changes with ",e.jsx(n.code,{children:"onChangeRowSelection"}),":"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  hasRowSelection
+  onChangeRowSelection={(rowSelection) => {
+    console.log(\`\${Object.keys(rowSelection).length} rows selected\`);
+  }}
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.h3,{id:"row-reordering",children:"Row Reordering"}),`
+`,e.jsxs(n.p,{children:["Enable row reordering with the ",e.jsx(n.code,{children:"hasRowReordering"})," prop and handle reordering with ",e.jsx(n.code,{children:"onReorderRows"}),":"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  hasRowReordering
+  onReorderRows={({ rowId, newRowIndex }) => {
+    // Handle row reordering logic
+  }}
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.h3,{id:"custom-empty-states",children:"Custom Empty States"}),`
+`,e.jsxs(n.p,{children:["Provide custom empty states for when there's no data or no search results. The ",e.jsx(n.code,{children:"DataView"})," component provides two distinct states for handling these scenarios:"]}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"isEmpty"})}),": Represents a state where no data exists at all. This is often seen in onboarding scenarios, such as when a user creates a new organization and no resources are available yet. For example:"]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsx(n.p,{children:`"You don't have any widgets! Create one?"`}),`
+`]}),`
+`,e.jsx(n.p,{children:"Use this state to guide users toward actions that populate data."}),`
+`]}),`
+`,e.jsxs(n.li,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:e.jsx(n.code,{children:"isNoResults"})}),': Indicates that data exists but no matches were found for the current query or filters. For instance, if a user searches for "asdf" and no results are returned, the message might be:']}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsx(n.p,{children:'"No data found for that query."'}),`
+`]}),`
+`,e.jsx(n.p,{children:"This state helps users understand that their search or filter criteria need adjustment."}),`
+`]}),`
+`]}),`
+`,e.jsxs(n.p,{children:["If ",e.jsx(n.code,{children:"emptyPlaceholder"})," is not defined, ",e.jsx(n.code,{children:"noResultsPlaceholder"})," will act as a fallback for the ",e.jsx(n.code,{children:"isEmpty"})," state instead."]}),`
+`,e.jsx(n.p,{children:"Here are examples demonstrating both cases:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  isEmpty={true | false}
+  emptyPlaceholder={<EmptyState heading="No data available" />}
+  isNoResults={true | false}
+  noResultsPlaceholder={
+    <EmptyState heading="No result found for that query." />
+  }
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.h3,{id:"tableoptions",children:"TableOptions"}),`
+`,e.jsxs(n.p,{children:["You can pass a ",e.jsx(n.code,{children:"tableLayoutOptions"})," prop to customize the table-specific behavior and appearance. Here's a detailed look at the available options:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  tableLayoutOptions={{
+    columns: columnDefinitions,
+    hasChangeableDensity: true,
+    hasColumnResizing: true,
+    hasColumnVisibility: true,
+    hasSorting: true,
+    initialDensity: "comfortable",
+    renderDetailPanel: ({ row }) => <DetailPanel data={row.original} />,
+    rowActionButtons: (row) => (
+      <>
+        <Button
+          endIcon={<EditIcon />}
+          ariaLabel="Edit"
+          size="small"
+          variant="floating"
+          onClick={() => handleEdit(row.original)}
+        />
+        <Button
+          endIcon={<DeleteIcon />}
+          ariaLabel="Delete"
+          size="small"
+          variant="floating"
+          onClick={() => handleDelete(row.original)}
+        />
+      </>
+    ),
+    rowActionMenuItems: (row) => (
+      <>
+        <MenuItem onClick={() => handleAction1(row.original)}>
+          Action 1
+        </MenuItem>
+        <MenuItem onClick={() => handleAction2(row.original)}>
+          Action 2
+        </MenuItem>
+      </>
+    ),
+  }}
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.p,{children:"Let's break down these options:"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"columns"}),": Array of column definitions (required)."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"hasChangeableDensity"}),": Allows users to change row density (compact, comfortable, spacious)."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"hasColumnResizing"}),": Enables column resizing."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"hasColumnVisibility"}),": Allows users to show/hide columns."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"hasSorting"}),": Enables column sorting."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"initialDensity"}),": Sets the initial row density."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"renderDetailPanel"}),": Function to render an expandable detail panel for each row."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"rowActionButtons"}),": Function to render action buttons for each row."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"rowActionMenuItems"}),": Function to render menu items for additional row actions."]}),`
+`]}),`
+`,e.jsx(n.h3,{id:"stackoptions",children:"StackOptions"}),`
+`,e.jsxs(n.p,{children:["When using ",e.jsx(n.code,{children:"DataView"})," with stack layouts, you can pass a ",e.jsx(n.code,{children:"cardLayoutOptions"})," prop to customize the card-based layout:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  cardLayoutOptions={{
+    itemProps: (row) => ({
+      overline: \`\${row.category}\`,
+      title: row.name,
+      description: row.description,
+      image: <img src={row.imageUrl} alt={row.name} />,
+      children: <Status label={row.status} severity="success" />,
+      detailPanel: <DetailPanel data={row} />,
+      button: (
+        <Button label="View Details" onClick={() => handleViewDetails(row)} />
+      ),
+      menuButtonChildren: (
+        <>
+          <MenuItem onClick={() => handleEdit(row)}>Edit</MenuItem>
+          <MenuItem onClick={() => handleDelete(row)}>Delete</MenuItem>
+        </>
+      ),
+    }),
+    maxGridColumns: 4,
+    renderDetailPanel: ({ row }) => <DetailPanel data={row} />,
+    rowActionMenuItems: (row) => (
+      <>
+        <MenuItem onClick={() => handleEdit(row)}>Edit</MenuItem>
+        <MenuItem onClick={() => handleDelete(row)}>Delete</MenuItem>
+      </>
+    ),
+  }}
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.p,{children:"Here's what these options do:"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"itemProps"}),": Function that returns props for the ",e.jsx(n.code,{children:"DataCard"})," component for each data item."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"maxGridColumns"}),": Maximum number of columns to display in grid layout."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"renderDetailPanel"}),": Function to render an expandable detail panel for each card."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"rowActionMenuItems"}),": Function to render menu items for card actions."]}),`
+`]}),`
+`,e.jsx(n.h2,{id:"data-handling-functions",children:"Data Handling Functions"}),`
+`,e.jsx(n.h3,{id:"getdata",children:"getData"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"getData"})," function is a crucial part of the DataView. It's responsible for fetching and filtering data based on the current state of the component. Here's the type definition:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`type DataGetDataType = {
+  filters?: DataFilter[];
+  page?: number;
+  resultsPerPage?: number;
+  search?: string;
+  sort?: MRT_SortingState;
+};
+`})}),`
+`,e.jsxs(n.p,{children:["Your ",e.jsx(n.code,{children:"getData"})," function should handle these parameters and return the appropriate data. For example:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const getData = useCallback(
+  ({ filters, page, resultsPerPage, search, sort }: DataGetDataType) => {
+    let filteredData = data;
+
+    // Apply filters
+    if (filters) {
+      filteredData = filteredData.filter((row) =>
+        filters.every((filter) => {
+          // Implement filter logic here
+        }),
+      );
+    }
+
+    // Apply search
+    if (search) {
+      filteredData = filteredData.filter((row) =>
+        Object.values(row).some((value) =>
+          value.toString().toLowerCase().includes(search.toLowerCase()),
+        ),
+      );
+    }
+
+    // Apply sorting
+    if (sort && sort.length > 0) {
+      filteredData.sort((a, b) => {
+        // Implement sorting logic here
+      });
+    }
+
+    // Apply pagination
+    const startIndex = (page - 1) * resultsPerPage;
+    const endIndex = startIndex + resultsPerPage;
+    return filteredData.slice(startIndex, endIndex);
+  },
+  [data],
+);
+`})}),`
+`,e.jsx(n.h3,{id:"onchangerowselection",children:"onChangeRowSelection"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"onChangeRowSelection"})," function is called whenever the row selection state changes. It receives the current selection state as an argument:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const onChangeRowSelection = useCallback(
+  (rowSelection: DataRowSelectionState) => {
+    console.log(\`\${Object.keys(rowSelection).length} rows selected\`);
+    // Perform actions based on the selected rows
+  },
+  [],
+);
+`})}),`
+`,e.jsx(n.h3,{id:"onreorderrows",children:"onReorderRows"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"onReorderRows"})," function is called when a row is reordered. It receives an object with the ",e.jsx(n.code,{children:"rowId"})," of the moved row and its ",e.jsx(n.code,{children:"newRowIndex"}),":"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`type DataOnReorderRowsType = {
+  newRowIndex: number;
+  rowId: string;
+};
+
+const onReorderRows = useCallback(
+  ({ rowId, newRowIndex }: DataOnReorderRowsType) => {
+    // Update your data structure to reflect the new order
+    const updatedData = [...data];
+    const movedItem = updatedData.find((item) => item.id === rowId);
+    if (movedItem) {
+      updatedData.splice(updatedData.indexOf(movedItem), 1);
+      updatedData.splice(newRowIndex, 0, movedItem);
+      setData(updatedData);
+    }
+  },
+  [data, setData],
+);
+`})}),`
+`,e.jsx(n.h2,{id:"additional-features",children:"Additional Features"}),`
+`,e.jsx(n.h3,{id:"additional-action-buttons-and-menu-items",children:"Additional action buttons and menu items"}),`
+`,e.jsxs(n.p,{children:["Using ",e.jsx(n.code,{children:"additionalActionButton"})," and ",e.jsx(n.code,{children:"additionalActionMenuItems"}),", you can provide additional actions that sit at the top of the ",e.jsx(n.code,{children:"DataView"}),`. This is
+perfect for things like an "Add row" button or a menu of actions that affect the entire table or list.`]}),`
+`,e.jsx(n.h3,{id:"bulk-actions-menu",children:"Bulk Actions Menu"}),`
+`,e.jsx(n.p,{children:"When row selection is enabled, you can provide bulk actions that apply to all selected rows:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  bulkActionMenuItems={(selectedRows) => (
+    <>
+      <MenuItem onClick={() => handleBulkAction1(selectedRows)}>
+        Bulk Action 1
+      </MenuItem>
+      <MenuItem onClick={() => handleBulkAction2(selectedRows)}>
+        Bulk Action 2
+      </MenuItem>
+    </>
+  )}
+  hasRowSelection
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.p,{children:"This will display a menu with bulk actions when rows are selected."}),`
+`,e.jsx(n.h3,{id:"error-handling",children:"Error Handling"}),`
+`,e.jsx(n.p,{children:"You can display an error message when data fetching fails:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  errorMessage="An error occurred while fetching data."
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.p,{children:"This will display a callout with the error message above the data view."}),`
+`,e.jsx(n.h3,{id:"lazy-loading",children:"Lazy Loading"}),`
+`,e.jsx(n.p,{children:"You can also use lazy loading instead of traditional pagination:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`<DataView
+  paginationType="loadMore"
+  // ... other props
+/>
+`})}),`
+`,e.jsx(n.p,{children:'This will display a "Load More" button instead of page numbers, allowing users to incrementally load more data.'}),`
+`,e.jsx(n.h2,{id:"customization",children:"Customization"}),`
+`,e.jsxs(n.p,{children:["While the ",e.jsx(n.code,{children:"DataView"})," come with pre-styled elements matching the Okta Odyssey design system, you can further customize the appearance using the theming capabilities of Material-UI and Emotion styled components."]}),`
+`,e.jsx(c,{of:h}),`
+`,e.jsxs(n.p,{children:["Explore the stories in this Storybook to see more examples and configurations of the ",e.jsx(n.code,{children:"DataView"})," suite."]})]})}function Ln(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(o,{...t})}):o(t)}export{Ln as default};