azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 23.1 kB
JavaScript
import{__assign,__extends,__spreadArray}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Table.css";import{ObservableLike}from"../../Core/Observable";import*as Utils_Accessibility from"../../Core/Util/Accessibility";import{format}from"../../Core/Util/String";import{FocusOrMouseWithin}from"../../FocusOrMouseWithin";import{FocusWithin}from"../../FocusWithin";import{FocusZone,FocusZoneContext,FocusZoneDirection,FocusZoneKeyStroke}from"../../FocusZone";import{Icon}from"../../Icon";import{Intersection}from"../../Intersection";import{getDefaultLinkProps}from"../../Link";import{List,renderListCell,DropdownList}from"../../List";import{Observer}from"../../Observer";import*as Resources from"../../Resources.Widgets";import{Orientation,Position,Sizer}from"../../Sizer";import{Tooltip}from"../../TooltipEx";import{KeyCode,css,getSafeId,getSafeIdWithSymbolConversion}from"../../Util";import{EventDispatch}from"../../Utilities/Dispatch";import{getTabIndex}from"../../Utilities/Focus";import{ScreenSizeConditional}from"../../Utilities/ScreenSize";import*as React from"react";import{ColumnJustification,IMeasurementStyle,SortOrder,TableColumnLayout,TableColumnStyle}from"./Table.Props";import{TableBreakpoint}from"./TableBreakpoint";var ColumnFillId="_fill",ColumnFill={columnLayout:TableColumnLayout.none,id:ColumnFillId,renderCell:function(e,t){return React.createElement("td",{key:"col-fill","aria-colindex":t+1,"aria-hidden":!0,className:css("bolt-table-cell bolt-list-cell","col-"+t),"data-column-index":t,role:"presentation"})},renderHeaderCell:function(e,t){return React.createElement("th",{key:"col-fill","aria-hidden":!0,className:css(t.headerClassName,"bolt-table-header-cell bolt-table-header-cell-empty","col-header-"+e),"data-column-index":e,role:"presentation"})},width:-100},Table=function(d){function e(e){var t,c=d.call(this,e)||this;c.currentElement=React.createRef(),c.list=React.createRef(),c.dropdownList=React.createRef(),c.onBreakpoint=function(){var e=c.props.tableBreakpoints?getVisibleColumnsAndIndices(c.props.columns).map(function(e){return e.originalIndex}).join(","):"";!c.state.renderInvisible&&c.state.visibleColumnsKey===e||c.setState({renderInvisible:!1,visibleColumnsKey:e})},c.onColumnsChanged=function(){return c.forceUpdate(),!1},c.renderHeader=function(){for(var e=c.props,t=e.columns,n=e.showHeader,l=e.renderHeader,e=e.spacerWidth,o=[],a=0,i=0;i<t.length;i++)(r=ObservableLike.getValue(t[i].width))<0&&(a+=r);for(i=0;i<t.length;i++){var r=ObservableLike.getValue(t[i].width);o[i]=0<=r?r:-r/a*100}var s=null;return!1!==n&&(s=l?l(t):React.createElement(TableHeader,{tableColumns:t})),"function"==typeof n&&(s=React.createElement(ScreenSizeConditional,{condition:function(e){return n(e)}},s)),React.createElement(React.Fragment,null,React.createElement("colgroup",null,React.createElement("col",{key:"col-group-left-spacer",style:{width:0===e?e+"%":e+"px"}}),getVisibleColumnsAndIndices(t).map(function(e){var t=e.column,n=e.originalIndex,e=t.widthStyle,l=void 0===e?IMeasurementStyle.Pixel:e;return React.createElement(Observer,{key:"col-group-"+n,width:{filter:c.onColumnsChanged,observableValue:t.width}},function(){return React.createElement("col",{style:{width:Math.abs(o[n])+(o[n]<0?"%":l===IMeasurementStyle.Pixel?"px":"rem")}})})}),React.createElement("col",{key:"col-group-right-spacer",style:{width:0===e?e+"%":e+"px"}})),s)},c.renderLoadingRow=function(e,t){var n=c.props,l=n.columns,n=n.renderLoadingRow,o={ariaBusy:!0,ariaRowOffset:t.ariaRowOffset,data:t.data,eventDispatch:c.state.eventDispatch,excludeFocusZone:!0,excludeTabStop:null!=(o=c.props.excludeTabStop)?o:t.excludeTabStop,itemProvider:c.props.itemProvider,listProps:t.listProps,onFocusItem:t.onFocusItem,renderSpacer:c.props.renderSpacer,selection:c.props.selection,singleClickActivation:c.props.onActivate&&c.props.singleClickActivation};return n?n(e,o):React.createElement(TableLoadingRow,{columns:l,details:o,rowIndex:e})},c.renderRow=function(e,t,n){var l={selectableText:n.selectableText,ariaRowOffset:n.ariaRowOffset,eventDispatch:c.state.eventDispatch,data:n.data,excludeTabStop:null!=(l=c.props.excludeTabStop)?l:n.excludeTabStop,itemProvider:c.props.itemProvider,listProps:n.listProps,onFocusItem:n.onFocusItem,renderSpacer:c.props.renderSpacer,selection:c.props.selection,singleClickActivation:c.props.onActivate&&c.props.singleClickActivation,role:"tree"===c.props.role?"treeitem":void 0},n=t.renderRow||c.props.renderRow;return n?n(e,t,l):React.createElement(TableRow,{details:l,index:e,linkProps:t.linkProps},renderColumns(e,c.props.columns,t,l))},window.isNewListEnabled?t=window.isNewListEnabled:(t=document.body.classList.contains("dropdown-list-component-enabled"),window.isNewListEnabled=t),c.state={columnBehaviors:[],eventDispatch:e.eventDispatch||new EventDispatch,renderInvisible:!!e.tableBreakpoints,visibleColumnsKey:"",tableBehaviors:[],tableWidth:"",newListEnabled:t};for(var n=0;n<e.columns.length;n++){var l=e.columns[n];if(l.behaviors)for(var o=0,a=l.behaviors;o<a.length;o++)(i=a[o])&&i.initialize&&i.initialize({tableProps:e,columnIndex:n},{},c.state.eventDispatch)}if(e.behaviors)for(var i,r=0,s=e.behaviors;r<s.length;r++)(i=s[r]).initialize&&i.initialize(e,c,c.state.eventDispatch);return c}return __extends(e,d),e.getDerivedStateFromProps=function(e,t){for(var n=[],l=[],o=0;o<e.columns.length;o++){var a=e.columns[o];if(a.behaviors)for(var i=0,r=a.behaviors;i<r.length;i++){var s=r[i];l.push(s)}}return e.behaviors&&n.splice.apply(n,__spreadArray([n.length,0],e.behaviors,!1)),{columnBehaviors:l,tableBehaviors:n}},e.prototype.render=function(){for(var e=this.state,t=e.eventDispatch,n=e.renderInvisible,l=e.visibleColumnsKey,e=e.newListEnabled,o=this.props,a=o.selectableText,i=o.className,r=o.columns,s=o.containerClassName,c=o.enforceSingleSelect,d=o.excludeTabStop,u=o.focuszoneProps,m=o.showLines,p=o.id,b=o.itemProvider,h=o.maxHeight,f=o.onActivate,v=o.onFocus,D=o.onSelect,O=o.pageSize,W=o.role,H=o.rowHeight,B=o.rowHeights,g=o.scrollable,M=o.selection,U=o.singleClickActivation,V=o.selectRowOnClick,Z=o.showScroll,w=o.tableBreakpoints,o=o.virtualize,R=[],C=2*(this.props.spacerWidth||0),x=C,y=C,S=C,I=!1,E=!1,L=!1,N=0,k=0,T=0,P=r;T<P.length;T++){var F=P[T],_=F.maxWidth,j=F.minWidth,z=F.widthStyle,z=void 0===z?IMeasurementStyle.Pixel:z,A=ObservableLike.getValue(F.width);R.push(F.width),A<0?(L=!0,y+=j||0,_?(I=!0,x+=_):E=!0,N++):0<A&&(z===IMeasurementStyle.Pixel?(S+=A,y+=A,x+=A):(S+=16*A,y+=16*A,x+=16*A),N++),"_fill"===F.id&&k++}C={selectableText:a,ariaColumnCount:N-k,ariaLabel:this.props.ariaLabel,ariaRowOffset:this.props.showHeader?1:0,className:css(i,"bolt-table",m&&"bolt-table-show-lines"),columnCount:N+2,enforceSingleSelect:c,eventDispatch:t,excludeTabStop:d,focuszoneProps:u,id:p,itemProvider:b,maxWidth:I&&!E?x+"px":void 0,maxHeight:h,minWidth:y!==S?y+"px":void 0,onActivate:f,onFocus:v,onSelect:D,pageSize:O,renderHeader:this.renderHeader,renderLoadingRow:this.renderLoadingRow,renderRow:this.renderRow,role:W,rowHeight:H,rowHeights:B,selection:M,selectRowOnClick:V,singleClickActivation:U,showScroll:Z,virtualize:o,width:L?"100%":S+"px"},0<=getActionableIndex(r)&&(C.defaultTabbableRow=-1),i=React.createElement("div",{className:css(s,"bolt-table-container flex-grow",n&&"invisible",g&&"v-scroll-auto",w&&"h-scroll-hidden"),ref:this.currentElement},w?React.createElement(TableBreakpoint,{columnWidths:R,onBreakpoint:this.onBreakpoint,breakpoints:w}):void 0,!e||"listbox"!==C.role||null!=(a=C.className)&&a.includes("bolt-list-box-tree")?React.createElement(List,__assign({},C,{key:l,ref:this.list})):React.createElement(DropdownList,__assign({},C,{key:l,ref:this.dropdownList,renderHeader:function(){return React.createElement(React.Fragment,null)}})));return i=g?React.createElement(Intersection,null,i):i},e.prototype.componentDidMount=function(){for(var e=0,t=this.state.tableBehaviors;e<t.length;e++)(n=t[e]).componentDidMount&&n.componentDidMount(this.props);for(var n,l=0,o=this.state.columnBehaviors;l<o.length;l++)(n=o[l]).componentDidMount&&n.componentDidMount({tableProps:this.props})},e.prototype.componentDidUpdate=function(){for(var e=0,t=this.state.tableBehaviors;e<t.length;e++)(n=t[e]).componentDidUpdate&&n.componentDidUpdate(this.props);for(var n,l=0,o=this.state.columnBehaviors;l<o.length;l++)(n=o[l]).componentDidUpdate&&n.componentDidUpdate({tableProps:this.props})},e.prototype.componentWillUnmount=function(){for(var e=0,t=this.state.tableBehaviors;e<t.length;e++)(n=t[e]).componentWillUnmount&&n.componentWillUnmount();for(var n,l=0,o=this.state.columnBehaviors;l<o.length;l++)(n=o[l]).componentDidUpdate&&n.componentDidUpdate({tableProps:this.props})},e.prototype.addOverlay=function(e,t,n,l,o){if(void 0===l&&(l=0),this.list.current)return this.list.current.addOverlay(e,t,n,l,o)},e.prototype.removeOverlay=function(e){if(this.list.current)return this.list.current.removeOverlay(e)},e.prototype.focusRow=function(e,t){return void 0===t&&(t=1),this.list.current?this.list.current.focusRow(e,t):Promise.resolve()},e.prototype.getFocusIndex=function(){return this.list.current?this.list.current.getFocusIndex():-1},e.prototype.getStats=function(){return this.list.current?this.list.current.getStats():{firstMaterialized:-1,firstRendered:-1,lastMaterialized:-1,lastRendered:-1}},e.prototype.scrollIntoView=function(e,t){if(this.list.current)return this.list.current.scrollIntoView(e,t)},e.defaultProps={role:"grid",selectRowOnClick:!0,showHeader:!0,showLines:!0,singleClickActivation:!0,spacerWidth:8},e}(React.Component);function renderColumns(n,e,l,o){return getVisibleColumnsAndIndices(e).map(function(e,t){e=e.column;return e.renderCell(n,t,e,l,n+(o.ariaRowOffset||1),o.role)})}function getVisibleColumnsAndIndices(e){return e.map(function(e,t){return{column:e,originalIndex:t}}).filter(function(e){e=e.column;return ObservableLike.getValue(e.width)})}function getActionableIndex(e){return e.findIndex(function(e){return 0!==ObservableLike.getValue(e.width)&&(e.behaviors&&0<e.behaviors.length||!!e.sortProps)})}var TableHeader=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return __extends(t,e),t.prototype.render=function(){var t=this,o=getActionableIndex(this.props.tableColumns);return React.createElement(FocusZoneContext.Consumer,null,function(l){return React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal},React.createElement("thead",null,React.createElement(FocusWithin,null,function(e){return React.createElement("tr",{"aria-rowindex":1,className:css("bolt-table-header-row",e.hasFocus&&"focused"),"data-row-index":-1,onBlur:e.onBlur,onFocus:e.onFocus,role:"row"},React.createElement("th",{"aria-hidden":"true",key:"left-spacer",role:"presentation",className:"bolt-table-header-border"}),getVisibleColumnsAndIndices(t.props.tableColumns).map(function(e,t){var n=e.column,e=e.originalIndex;return n.renderHeaderCell?n.renderHeaderCell(t,n,l.focuszoneId,e===o):n.iconProps||n.name?React.createElement(TableHeaderCell,{key:"col-header-"+t,ariaLabel:n.ariaLabel||n.name,column:n,columnIndex:t,focuszoneId:l.focuszoneId,isFirstActionableHeader:e===o},React.createElement(Tooltip,{overflowOnly:!0,text:n.name},React.createElement("div",{className:"bolt-table-header-cell-text text-ellipsis body-s"},n.iconProps&&Icon(n.iconProps),React.createElement("span",{className:css(n.headerTitleClassName,n.required&&"bolt-table-header-cell-text--required")},n.name)))):React.createElement("th",{"aria-colindex":t+1,"aria-label":n.ariaLabel||Resources.EmptyColumnHeaderLabel,"aria-readonly":void 0!==n.readonly?n.readonly:"true",className:"bolt-table-header-border",key:"col-header-"+t})}),React.createElement("th",{"aria-hidden":"true",key:"right-spacer",role:"presentation",className:"bolt-table-header-border"}))})))})},t}(React.Component),boltTableHeaderCellCount=0,TableHeaderCell=function(t){function e(e){var l=t.call(this,e)||this;return l.element=React.createRef(),l.state={measuredWidth:0,isFocused:!1},l.onSize=function(e,t){var n=l.props.column;n.onSize&&n.onSize(e,l.props.columnIndex,t,n)},l.headerCellId=boltTableHeaderCellCount++,l}return __extends(e,t),e.prototype.render=function(){var t,r,s=this,e=this.props,c=e.ariaLabel,d=e.column,u=e.columnIndex,m=e.focuszoneId,p=e.isFirstActionableHeader;return d.onSize&&(t=!!d.showSizerDivider,r=React.createElement(Observer,{width:d.width},function(e){e=e.width;return e<0&&(e=s.state.measuredWidth),React.createElement(Sizer,{className:"bolt-table-header-sizer",divider:t,keyboardStepMultiplier:24,maxSize:d.maxWidth,minSize:d.minWidth,onSize:s.onSize,onSizeEnd:s.props.column.onSizeEnd,orientation:Orientation.row,position:Position.near,size:e,tabIndex:s.state.isFocused?0:-1,getFocusedElement:function(e){return s.element}})})),React.createElement(FocusZoneContext.Consumer,null,function(e){var t,n=d.behaviors&&0<d.behaviors.length||!!d.sortProps,l=d.sortProps,l=void 0===l?{}:l,o=d.sortProps&&void 0!==l.sortOrder?Icon({className:"bolt-table-header-sort-icon body-s",iconName:l.sortOrder===SortOrder.ascending?"SortUp":"SortDown"}):null,a=(d.justification===ColumnJustification.Left?t="justify-start":d.justification===ColumnJustification.Right&&(t="justify-end"),u+1),i=getSafeId("th-col-content-"+s.headerCellId);return React.createElement("th",{role:"columnheader","aria-colindex":a,"aria-label":c,"aria-labelledby":c?void 0:i,"aria-readonly":"true","aria-sort":void 0!==l.sortOrder?l.sortOrder===SortOrder.ascending?"ascending":"descending":void 0,className:css(d.headerClassName,"bolt-table-header-cell","col-header-"+u,n&&"bolt-table-header-cell-actionable"),"data-column-index":u,"data-focuszone":n&&css(p&&m,e.focuszoneId),ref:s.element,onFocus:function(){return s.setState({isFocused:!0})},onBlur:function(){return s.setState({isFocused:!1})},tabIndex:n||r?0:-1},React.createElement("div",{className:css("bolt-table-header-cell-content flex-row",t)},d.justification===ColumnJustification.Right&&o,React.createElement("div",{id:i,className:"scroll-hidden"},s.props.children),d.justification!==ColumnJustification.Right&&o,React.createElement("div",{"aria-hidden":!s.state.isFocused},r)))})},e.prototype.componentDidMount=function(){this.updateMeasuredWidth()},e.prototype.componentDidUpdate=function(){this.updateMeasuredWidth()},e.prototype.updateMeasuredWidth=function(){var e=this.props.column;e.onSize&&this.element.current&&ObservableLike.getValue(e.width)<0&&(e=this.element.current.getBoundingClientRect().width)!==this.state.measuredWidth&&this.setState({measuredWidth:e})},e}(React.Component);function TableRow(o){function a(e){var t=e.target.nodeName;return e.defaultPrevented||"INPUT"===t||"TEXTAREA"===t||e.which===KeyCode.leftArrow&&s.current&&(s.current.focus(),e.preventDefault()),FocusZoneKeyStroke.IgnoreNone}var i,r,s=React.useState(function(){return React.createRef()})[0],c=o.details,d=o.index,u=o.linkProps,m=c.selectableText,p=c.ariaLabel,b=c.ariaBusy,h=c.ariaDescribedBy,f=c.ariaPosInSet,v=c.ariaRowOffset,g=c.ariaSetSize,w=c.excludeFocusZone,R=c.id,C=c.renderSpacer,x=c.role,y=c.selection,S=c.singleClickActivation,e=("menuitemcheckbox"===x?i=y&&y.selected(d):r=y&&y.selected(d),React.createElement(FocusOrMouseWithin,{onFocus:function(e){o.details.onFocusItem(o.index,e);e=null!=(e=o.details.ariaPosInSet)?e:o.index+v;o.details.ariaSetSize?o.linkProps?Utils_Accessibility.announce(format(Resources.ClickableRowAnnouncementWithSize,e,o.details.ariaSetSize),!0):"option"==x?Utils_Accessibility.announce(Resources.ListItem,!0):Utils_Accessibility.announce(format(Resources.RowAnnouncementWithSize,e,o.details.ariaSetSize),!0):o.linkProps?Utils_Accessibility.announce(format(Resources.ClickableRowAnnouncement,e),!0):Utils_Accessibility.announce(format(Resources.RowAnnouncement,e),!0)}},function(l){return React.createElement(FocusZoneContext.Consumer,null,function(e){var t,n={"aria-busy":b,"aria-checked":i,"aria-describedby":h,"aria-label":p,"aria-rowindex":"menuitemcheckbox"===x||"option"===x||"presentation"===x?void 0:d+v,"aria-posinset":null===f?void 0:f,"aria-selected":"presentation"===x?void 0:r,"aria-setsize":null===g?void 0:g,className:css(o.className,"bolt-table-row bolt-list-row",0===d&&"first-row",l.hasFocus&&"focused",y&&y.selected(d)&&"selected",S&&"single-click-activation",u&&"v-align-middle",m&&"selectable-text",document.body.classList.contains("dropdown-list-component-enabled")&&(null==(n=null==o?void 0:o.className)?void 0:n.includes("bolt-list-box-row"))&&"dropdown-list"),"data-focuszone":w||y&&!y.selectable(d)?void 0:e.focuszoneId,"data-row-index":o.index,id:getSafeIdWithSymbolConversion(R),role:x||"row",tabIndex:getTabIndex(c),onBlur:l.onBlur,onFocus:l.onFocus,onMouseEnter:l.onMouseEnter,onMouseLeave:l.onMouseLeave,ref:s},e=[],e=null!=(t=null===n?void 0:n.className)&&t.includes("dropdown-list")?[o.children]:[React.createElement("td",{"aria-hidden":"true",key:"left-spacer",className:"bolt-table-cell-compact bolt-table-cell bolt-list-cell bolt-table-spacer-cell",role:"presentation"},C&&C(d,!0)),o.children,React.createElement("td",{"aria-hidden":"true",key:"right-spacer",className:"bolt-table-cell-compact bolt-table-cell bolt-list-cell bolt-table-spacer-cell",role:"presentation"},C&&C(d,!1))];return React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal,postprocessKeyStroke:a},u?React.createElement("a",__assign({},getDefaultLinkProps(u),n),e):null!=(t=null===n?void 0:n.className)&&t.includes("dropdown-list")?React.createElement("li",__assign({},n),e):React.createElement("tr",__assign({},n),e))})}));return c.tooltipProps?React.createElement(Tooltip,__assign({},c.tooltipProps),e):e}function TableLoadingRow(e){return React.createElement(TableRow,{className:"bolt-list-row-loading",details:e.details,index:e.rowIndex},getVisibleColumnsAndIndices(e.columns).map(function(e,t){return SimpleTableCell({columnIndex:t,children:renderLoadingCell(e.column.columnLayout)})}))}function TableCell(e){var t,n,l=e.ariaLabel,o=e.ariaRowIndex,a=e.className,i=e.colspan,r=e.columnIndex,s=e.role,c=e.tableColumn;return c&&(c.justification===ColumnJustification.Left?n="justify-cell-start":c.justification===ColumnJustification.Right&&(n="justify-cell-end")),null!=(t=null==(t=e.tableColumn)?void 0:t.className)&&t.includes("dropdown-list")||null!=(t=e.className)&&t.includes("dropdown-list")?React.createElement("span",{"aria-colindex":"presentation"===s||"treeitem"===s?void 0:r+1,"aria-label":"presentation"===s||"treeitem"===s?void 0:l,"aria-readonly":"presentation"===s||"treeitem"===s?void 0:c&&c.readonly,"aria-rowindex":"presentation"===s||"treeitem"===s?void 0:o,className:css(a,c&&c.className,"bolt-table-cell bolt-list-cell",n),"data-column-index":r,key:"col-"+r,role:"treeitem"===s?"presentation":s||"gridcell"},e.children):React.createElement("td",{"aria-colindex":"presentation"===s||"treeitem"===s?void 0:r+1,"aria-label":"presentation"===s||"treeitem"===s?void 0:l,"aria-readonly":"presentation"===s||"treeitem"===s?void 0:c&&c.readonly,"aria-rowindex":"presentation"===s||"treeitem"===s?void 0:o,className:css(a,c&&c.className,"bolt-table-cell bolt-list-cell",n),colSpan:i,"data-column-index":r,key:"col-"+r,role:"treeitem"===s?"presentation":s||"gridcell"},e.children)}function SimpleTableCell(e){var t=React.createElement("div",{className:css(e.contentClassName,"bolt-table-cell-content flex-row flex-center")},e.children);return TableCell({ariaLabel:e.ariaLabel,ariaRowIndex:e.ariaRowIndex,children:t,className:e.className,colspan:e.colspan,columnIndex:e.columnIndex,role:e.role,tableColumn:e.tableColumn})}function TwoLineTableCell(e){var t="bolt-table-two-line-cell-item flex-row scroll-hidden",n=React.createElement("div",{className:t},e.line1,e.trailingLine1IconProps&&Icon(__assign(__assign({},e.trailingLine1IconProps),{className:css(e.trailingLine1IconProps.className,"flex-noshrink")}))),t=React.createElement("div",{className:t},e.line2),n=React.createElement(React.Fragment,null,n,t),t=e.iconProps?React.createElement("div",{className:css(e.className,"bolt-table-cell-content flex-row flex-center")},Icon(__assign(__assign({},e.iconProps),{className:css(e.iconProps.className,"bolt-table-two-line-cell-icon flex-noshrink")})),React.createElement("div",{className:"flex-column scroll-hidden"},n),e.trailingIconProps&&Icon(__assign(__assign({},e.trailingIconProps),{className:css(e.trailingIconProps.className,"bolt-table-two-line-cell-icon flex-noshrink")}))):React.createElement("div",{className:css(e.className,"bolt-table-cell-content flex-column")},n,e.trailingIconProps&&Icon(__assign(__assign({},e.trailingIconProps),{className:css(e.trailingIconProps.className,"bolt-table-two-line-cell-icon flex-noshrink")})));return TableCell({ariaRowIndex:e.ariaRowIndex,children:t,colspan:e.colspan,columnIndex:e.columnIndex,className:"bolt-table-two-line-cell",tableColumn:e.tableColumn})}function renderEmptyCell(e,t){return React.createElement(TableCell,{columnIndex:t,key:t,role:"presentation"})}function renderSimpleCell(e,t,n,l,o){return renderSimpleCellValue(t,n,l[n.id],o)}function renderSimpleCellValue(e,t,n,l){var o=t.columnStyle,a=!(!n||"string"==typeof n||"number"==typeof n||!n.href);return React.createElement(SimpleTableCell,{ariaRowIndex:l,className:css(o===TableColumnStyle.Primary&&"bolt-table-cell-primary",o===TableColumnStyle.Secondary&&"bolt-table-cell-secondary",o===TableColumnStyle.Tertiary&&"bolt-table-cell-tertiary"),columnIndex:e,contentClassName:a?"bolt-table-cell-content-with-link":void 0,key:e,tableColumn:t},n&&renderListCell(n))}function getVariableLength(){return 80*Math.random()+20+"%"}function renderLoadingCell(e){return e===TableColumnLayout.singleLine||void 0===e?React.createElement("div",{className:"shimmer shimmer-line",style:{width:getVariableLength()}}," "):e===TableColumnLayout.singleLinePrefix?React.createElement(React.Fragment,null,React.createElement("div",{className:"shimmer shimmer-circle-small flex-noshrink"}),React.createElement("div",{className:"shimmer shimmer-line",style:{width:getVariableLength()}}," ")):e===TableColumnLayout.twoLine?React.createElement("div",{className:"flex-column flex-grow"},React.createElement("div",{className:"bolt-table-two-line-cell-item shimmer shimmer-line",style:{width:getVariableLength()}}," "),React.createElement("div",{className:"bolt-table-two-line-cell-item shimmer shimmer-line",style:{width:getVariableLength()}}," ")):e===TableColumnLayout.twoLinePrefix?React.createElement(React.Fragment,null,React.createElement("div",{className:"shimmer shimmer-circle-large flex-noshrink"}),React.createElement("div",{className:"flex-column flex-grow"},React.createElement("div",{className:"bolt-table-two-line-cell-item shimmer shimmer-line",style:{width:getVariableLength()}}," "),React.createElement("div",{className:"bolt-table-two-line-cell-item shimmer shimmer-line",style:{width:getVariableLength()}}," "))):null}export{ColumnFillId,ColumnFill,Table,renderColumns,TableHeaderCell,TableRow,TableLoadingRow,TableCell,SimpleTableCell,TwoLineTableCell,renderEmptyCell,renderSimpleCell,renderSimpleCellValue,renderLoadingCell};