@ni/nimble-components 30.0.2 → 30.0.3

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.
@@ -10346,12 +10346,21 @@ return!this.missingColumnId&&!this.duplicateColumnId}validateColumnSortIndices(t
10346
10346
  grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
10347
10347
  }
10348
10348
 
10349
+ .collapse-all-button-container {
10350
+ display: flex;
10351
+ min-width: ${Sl};
10352
+ }
10353
+
10349
10354
  .collapse-all-button {
10350
10355
  height: ${Cl};
10351
10356
  margin-left: ${Sl};
10352
10357
  visibility: hidden;
10353
10358
  }
10354
10359
 
10360
+ .collapse-all-button.hidden-size-reduced {
10361
+ display: none;
10362
+ }
10363
+
10355
10364
  .collapse-all-button.visible {
10356
10365
  visibility: visible;
10357
10366
  }
@@ -10654,7 +10663,7 @@ const PR="nimble-table-header",zR=Mt`
10654
10663
  flex: 0 0 auto;
10655
10664
  }
10656
10665
 
10657
- .row-front-spacer.top-level-parent {
10666
+ .row-front-spacer.reduced-size-spacer {
10658
10667
  width: ${Sl};
10659
10668
  }
10660
10669
 
@@ -10828,7 +10837,7 @@ const WR="nimble-table-cell",GR=Q`
10828
10837
  `)}
10829
10838
  </span>
10830
10839
  `)}
10831
- <span class="row-front-spacer ${t=>t.isTopLevelParentRow?"top-level-parent":""}"></span>
10840
+ <span class="row-front-spacer ${t=>t.isTopLevelParentRow||!t.reserveCollapseSpace?"reduced-size-spacer":""}"></span>
10832
10841
  ${Gt((t=>t.isParentRow),Q`
10833
10842
  ${Gt((t=>t.loading),Q`
10834
10843
  <span class="spinner-container">
@@ -10894,7 +10903,7 @@ const WR="nimble-table-cell",GR=Q`
10894
10903
  </span>
10895
10904
  </template>
10896
10905
  `
10897
- class ZR extends We{constructor(){super(...arguments),this.selectable=!1,this.selected=!1,this.hideSelection=!1,this.expanded=!1,this.columnNotifiers=[],this.columns=[],this.nestingLevel=0,this.isParentRow=!1,this.menuOpen=!1,this.rowOperationGridCellHidden=!1,this.loading=!1,this.cellIndentLevels=[],this.cellStates=[],this.animationClass="",this.ignoreSelectionChangeEvents=!1,this.removeAnimatingClass=()=>{this.animationClass="",this.expandIcon?.removeEventListener("transitionend",this.removeAnimatingClass)}}get isTopLevelParentRow(){return this.isParentRow&&0===this.nestingLevel}get isNestedParent(){return this.isParentRow&&this.nestingLevel>0}get showSelectionCheckbox(){return this.selectable&&!this.hideSelection}get ariaSelected(){return this.selectable?this.selected?"true":"false":null}onSelectionCheckboxChange(t){if(this.ignoreSelectionChangeEvents)return
10906
+ class ZR extends We{constructor(){super(...arguments),this.selectable=!1,this.selected=!1,this.hideSelection=!1,this.expanded=!1,this.reserveCollapseSpace=!1,this.columnNotifiers=[],this.columns=[],this.nestingLevel=0,this.isParentRow=!1,this.menuOpen=!1,this.rowOperationGridCellHidden=!1,this.loading=!1,this.cellIndentLevels=[],this.cellStates=[],this.animationClass="",this.ignoreSelectionChangeEvents=!1,this.removeAnimatingClass=()=>{this.animationClass="",this.expandIcon?.removeEventListener("transitionend",this.removeAnimatingClass)}}get isTopLevelParentRow(){return this.isParentRow&&0===this.nestingLevel}get isNestedParent(){return this.isParentRow&&this.nestingLevel>0}get showSelectionCheckbox(){return this.selectable&&!this.hideSelection}get ariaSelected(){return this.selectable?this.selected?"true":"false":null}onSelectionCheckboxChange(t){if(this.ignoreSelectionChangeEvents)return
10898
10907
  const e=t.target.checked
10899
10908
  this.onSelectionChange(!e,e)}onSelectionChange(t,e){this.selected=e
10900
10909
  const n={oldState:t,newState:e}
@@ -10906,7 +10915,7 @@ this.$emit(t,i)}columnsChanged(){this.updateCellIndentLevels(),this.updateCellSt
10906
10915
  return e.subscribe(this),e}))}updateCellStates(){this.cellStates=this.columns.map((t=>{const e=t.columnInternals.dataRecordFieldNames
10907
10916
  let n
10908
10917
  if(this.hasValidFieldNames(e)&&this.dataRecord){const i=e.map((t=>this.dataRecord[t]))
10909
- n={cellRecord:Object.fromEntries(t.columnInternals.cellRecordFieldNames.map(((t,e)=>[t,i[e]]))),columnConfig:t.columnInternals.columnConfig}}return n}))}hasValidFieldNames(t){return t.every((t=>void 0!==t))}selectedChanged(){this.setSelectionCheckboxState()}selectionCheckboxChanged(){this.setSelectionCheckboxState()}setSelectionCheckboxState(){this.selectionCheckbox&&(this.ignoreSelectionChangeEvents=!0,this.selectionCheckbox.checked=this.selected,this.ignoreSelectionChangeEvents=!1)}}t([ft({attribute:"record-id"})],ZR.prototype,"recordId",void 0),t([ft({mode:"boolean"})],ZR.prototype,"selectable",void 0),t([ft({mode:"boolean"})],ZR.prototype,"selected",void 0),t([ft({attribute:"hide-selection",mode:"boolean"})],ZR.prototype,"hideSelection",void 0),t([ft({mode:"boolean"})],ZR.prototype,"expanded",void 0),t([C],ZR.prototype,"dataRecord",void 0),t([C],ZR.prototype,"columns",void 0),t([C],ZR.prototype,"currentActionMenuColumn",void 0),t([C],ZR.prototype,"nestingLevel",void 0),t([C],ZR.prototype,"resolvedRowIndex",void 0),t([ft({attribute:"is-parent-row",mode:"boolean"})],ZR.prototype,"isParentRow",void 0),t([ft({attribute:"menu-open",mode:"boolean"})],ZR.prototype,"menuOpen",void 0),t([ft({attribute:"row-operation-grid-cell-hidden",mode:"boolean"})],ZR.prototype,"rowOperationGridCellHidden",void 0),t([ft({mode:"boolean"})],ZR.prototype,"loading",void 0),t([C],ZR.prototype,"cellIndentLevels",void 0),t([C],ZR.prototype,"cellStates",void 0),t([C],ZR.prototype,"selectionCheckbox",void 0),t([C],ZR.prototype,"animationClass",void 0),t([k],ZR.prototype,"isTopLevelParentRow",null),t([k],ZR.prototype,"isNestedParent",null),t([k],ZR.prototype,"showSelectionCheckbox",null),t([k],ZR.prototype,"ariaSelected",null)
10918
+ n={cellRecord:Object.fromEntries(t.columnInternals.cellRecordFieldNames.map(((t,e)=>[t,i[e]]))),columnConfig:t.columnInternals.columnConfig}}return n}))}hasValidFieldNames(t){return t.every((t=>void 0!==t))}selectedChanged(){this.setSelectionCheckboxState()}selectionCheckboxChanged(){this.setSelectionCheckboxState()}setSelectionCheckboxState(){this.selectionCheckbox&&(this.ignoreSelectionChangeEvents=!0,this.selectionCheckbox.checked=this.selected,this.ignoreSelectionChangeEvents=!1)}}t([ft({attribute:"record-id"})],ZR.prototype,"recordId",void 0),t([ft({mode:"boolean"})],ZR.prototype,"selectable",void 0),t([ft({mode:"boolean"})],ZR.prototype,"selected",void 0),t([ft({attribute:"hide-selection",mode:"boolean"})],ZR.prototype,"hideSelection",void 0),t([ft({mode:"boolean"})],ZR.prototype,"expanded",void 0),t([ft({attribute:"reserve-collapse-space",mode:"boolean"})],ZR.prototype,"reserveCollapseSpace",void 0),t([C],ZR.prototype,"dataRecord",void 0),t([C],ZR.prototype,"columns",void 0),t([C],ZR.prototype,"currentActionMenuColumn",void 0),t([C],ZR.prototype,"nestingLevel",void 0),t([C],ZR.prototype,"resolvedRowIndex",void 0),t([ft({attribute:"is-parent-row",mode:"boolean"})],ZR.prototype,"isParentRow",void 0),t([ft({attribute:"menu-open",mode:"boolean"})],ZR.prototype,"menuOpen",void 0),t([ft({attribute:"row-operation-grid-cell-hidden",mode:"boolean"})],ZR.prototype,"rowOperationGridCellHidden",void 0),t([ft({mode:"boolean"})],ZR.prototype,"loading",void 0),t([C],ZR.prototype,"cellIndentLevels",void 0),t([C],ZR.prototype,"cellStates",void 0),t([C],ZR.prototype,"selectionCheckbox",void 0),t([C],ZR.prototype,"animationClass",void 0),t([k],ZR.prototype,"isTopLevelParentRow",null),t([k],ZR.prototype,"isNestedParent",null),t([k],ZR.prototype,"showSelectionCheckbox",null),t([k],ZR.prototype,"ariaSelected",null)
10910
10919
  const KR=ZR.compose({baseName:"table-row",template:GR,styles:VR})
10911
10920
  _i.getOrCreate().withPrefix("nimble").register(KR())
10912
10921
  const YR="nimble-table-row",XR=Mt`
@@ -11078,7 +11087,7 @@ const eF="nimble-table-group-row",nF=Q`
11078
11087
  ${Ut("selectionCheckbox")}
11079
11088
  ${""}
11080
11089
  tabindex="-1"
11081
- class="${t=>`selection-checkbox ${t.selectionMode?t.selectionMode:""}`}"
11090
+ class="selection-checkbox"
11082
11091
  @change="${(t,e)=>t.onAllRowsSelectionChange(e.event)}"
11083
11092
  title="${t=>Rv.getValueFor(t)}"
11084
11093
  aria-label="${t=>Rv.getValueFor(t)}"
@@ -11086,19 +11095,21 @@ const eF="nimble-table-group-row",nF=Q`
11086
11095
  </${fg}>
11087
11096
  </span>
11088
11097
  `)}
11089
- <${zh}
11090
- ${Ut("collapseAllButton")}
11091
- ${""}
11092
- tabindex="-1"
11093
- class="collapse-all-button ${t=>""+(t.showCollapseAll?"visible":"")}"
11094
- content-hidden
11095
- appearance="${sh}"
11096
- title="${t=>Ev.getValueFor(t)}"
11097
- @click="${t=>t.handleCollapseAllRows()}"
11098
- >
11099
- <${nv} slot="start"></${nv}>
11100
- ${t=>Ev.getValueFor(t)}
11101
- </${zh}>
11098
+ <span class="collapse-all-button-container">
11099
+ <${zh}
11100
+ ${Ut("collapseAllButton")}
11101
+ ${""}
11102
+ tabindex="-1"
11103
+ class="collapse-all-button ${t=>t.collapseButtonVisibility}"
11104
+ content-hidden
11105
+ appearance="${sh}"
11106
+ title="${t=>Ev.getValueFor(t)}"
11107
+ @click="${t=>t.handleCollapseAllRows()}"
11108
+ >
11109
+ <${nv} slot="start"></${nv}>
11110
+ ${t=>Ev.getValueFor(t)}
11111
+ </${zh}>
11112
+ </span>
11102
11113
  </span>
11103
11114
  <span class="column-headers-container" ${Ut("columnHeadersContainer")}>
11104
11115
  ${Qt((t=>t.visibleColumns),Q`
@@ -11182,6 +11193,7 @@ const eF="nimble-table-group-row",nF=Q`
11182
11193
  ?selected="${(t,e)=>e.parent.tableData[t.index]?.selectionState===lR}"
11183
11194
  ?expanded="${(t,e)=>e.parent.tableData[t.index]?.isExpanded}"
11184
11195
  ?hide-selection="${(t,e)=>e.parent.selectionMode!==rR.multiple}"
11196
+ ?reserve-collapse-space="${(t,e)=>e.parent.canHaveCollapsibleRows}"
11185
11197
  :dataRecord="${(t,e)=>e.parent.tableData[t.index]?.record}"
11186
11198
  :columns="${(t,e)=>e.parent.columns}"
11187
11199
  :isParentRow="${(t,e)=>e.parent.tableData[t.index]?.isParentRow}"
@@ -11545,7 +11557,7 @@ const i=e??this.columnIndex,s=n??this.rowIndex
11545
11557
  return i>=0&&i<t.cells.length&&(this.focusType=vR,this.setRowCellFocusState(i,s,!0),!0)}trySetCellContentFocus(t,e,n,i){if(!t)return!1
11546
11558
  const s=n??this.columnIndex,o=i??this.rowIndex
11547
11559
  return s>=0&&s<t.cells.length&&e>=0&&e<t.cells[s].cell.cellView.tabbableChildren.length&&(this.setCellContentFocusState(e,o,s,!0),!0)}trySetCellActionMenuFocus(t,e,n){const i=e??this.columnIndex,s=n??this.rowIndex
11548
- return!!(i>=0&&i<t.cells.length&&t.cells[i].actionMenuButton)&&(this.setCellActionMenuFocusState(s,i,!0),!0)}setCellActionMenuFocusState(t,e,n){this.focusType=bR,this.setRowCellFocusState(e,t,n)}setCellContentFocusState(t,e,n,i){this.focusType=yR,this.cellContentIndex=t,this.setRowCellFocusState(n,e,i)}setRowFocusState(t){this.focusType=mR,void 0!==t&&(this.rowIndex=t)}setCellFocusState(t,e,n){this.focusType=vR,this.setRowCellFocusState(t,e,n)}setRowCellFocusState(t,e,n){this.rowIndex=e,this.columnIndex=t,n&&this.focusCurrentRow(!0)}isResolvedRowType(t){return t instanceof ZR||t instanceof QR}}let FF=class extends We{get validity(){return this.tableValidator.getValidity()}get showRowOperationColumn(){return this.selectionMode===rR.multiple||this.showCollapseAll}constructor(){super(),this.selectionMode=rR.none,this.tableData=[],this.columns=[],this.childItems=[],this.rowElements=[],this.canRenderRows=!0,this.scrollX=0,this.selectionState=aR,this.showCollapseAll=!1,this.visibleColumns=[],this.tableScrollableMinWidth=0,this.windowShiftKeyDown=!1,this.tableValidator=new OR,this.tableUpdateTracker=new CF(this),this.columnNotifiers=[],this.isInitialized=!1,this.ignoreSelectionChangeEvents=!1,this.requestedSlots=new Map,this.actionMenuSlots=[],this.onViewPortScroll=t=>{this.scrollX=t.target.scrollLeft},this.onKeyDown=t=>{this.windowShiftKeyDown=t.shiftKey},this.onKeyUp=t=>{this.windowShiftKeyDown=t.shiftKey},this.onBlur=()=>{this.windowShiftKeyDown=!1},this.getRowCanExpand=t=>this.expansionManager.isRowExpandable(t),this.getIsRowExpanded=t=>this.expansionManager.isRowExpanded(t),this.handleRowSelectionChange=t=>{const e=t instanceof Function?t(this.table.getState().rowSelection):t
11560
+ return!!(i>=0&&i<t.cells.length&&t.cells[i].actionMenuButton)&&(this.setCellActionMenuFocusState(s,i,!0),!0)}setCellActionMenuFocusState(t,e,n){this.focusType=bR,this.setRowCellFocusState(e,t,n)}setCellContentFocusState(t,e,n,i){this.focusType=yR,this.cellContentIndex=t,this.setRowCellFocusState(n,e,i)}setRowFocusState(t){this.focusType=mR,void 0!==t&&(this.rowIndex=t)}setCellFocusState(t,e,n){this.focusType=vR,this.setRowCellFocusState(t,e,n)}setRowCellFocusState(t,e,n){this.rowIndex=e,this.columnIndex=t,n&&this.focusCurrentRow(!0)}isResolvedRowType(t){return t instanceof ZR||t instanceof QR}}let FF=class extends We{get validity(){return this.tableValidator.getValidity()}get showRowOperationColumn(){return this.selectionMode===rR.multiple||this.showCollapseAll}get collapseButtonVisibility(){return this.canHaveCollapsibleRows?this.showCollapseAll?"visible":"":"hidden-size-reduced"}constructor(){super(),this.selectionMode=rR.none,this.tableData=[],this.columns=[],this.childItems=[],this.rowElements=[],this.canRenderRows=!0,this.scrollX=0,this.selectionState=aR,this.showCollapseAll=!1,this.canHaveCollapsibleRows=!1,this.visibleColumns=[],this.tableScrollableMinWidth=0,this.windowShiftKeyDown=!1,this.tableValidator=new OR,this.tableUpdateTracker=new CF(this),this.columnNotifiers=[],this.isInitialized=!1,this.ignoreSelectionChangeEvents=!1,this.requestedSlots=new Map,this.actionMenuSlots=[],this.onViewPortScroll=t=>{this.scrollX=t.target.scrollLeft},this.onKeyDown=t=>{this.windowShiftKeyDown=t.shiftKey},this.onKeyUp=t=>{this.windowShiftKeyDown=t.shiftKey},this.onBlur=()=>{this.windowShiftKeyDown=!1},this.getRowCanExpand=t=>this.expansionManager.isRowExpandable(t),this.getIsRowExpanded=t=>this.expansionManager.isRowExpanded(t),this.handleRowSelectionChange=t=>{const e=t instanceof Function?t(this.table.getState().rowSelection):t
11549
11561
  this.updateTableOptions({state:{rowSelection:e}})},this.handleExpandedChange=t=>{const e=t instanceof Function?t(this.table.getState().expanded):t
11550
11562
  this.updateTableOptions({state:{expanded:e}})},this.options={data:[],onStateChange:t=>{},onRowSelectionChange:this.handleRowSelectionChange,onExpandedChange:this.handleExpandedChange,getCoreRowModel:t=>rO((()=>[t.options.data]),(e=>{const n={rows:[],flatRows:[],rowsById:{}},i=function(e,s,o){void 0===s&&(s=0)
11551
11563
  const r=[]
@@ -11581,7 +11593,8 @@ let r=oR.ascending
11581
11593
  s?o===oR.descending?(n.splice(i,1),r=oR.none,t.columnInternals.currentSortIndex=void 0):r=oR.descending:n.push(t),t.columnInternals.currentSortDirection=r
11582
11594
  for(let i=0;i<n.length;i++){const s=n[i]
11583
11595
  e?n[i].columnInternals.currentSortIndex=i:s===t?s.columnInternals.currentSortIndex=0:(s.columnInternals.currentSortIndex=void 0,s.columnInternals.currentSortDirection=oR.none)}this.emitColumnConfigurationChangeEvent()}onHeaderKeyDown(t,e){const n=e.shiftKey
11584
- return e.key===Aa&&this.toggleColumnSort(t,n),!0}update(){this.validate(),this.tableUpdateTracker.requiresTanStackUpdate&&this.updateTanStack(),this.tableUpdateTracker.updateActionMenuSlots&&this.updateActionMenuSlots(),this.tableUpdateTracker.updateColumnWidths&&(this.rowGridColumns=this.layoutManager.getGridTemplateColumns(),this.visibleColumns=this.columns.filter((t=>!t.columnHidden))),this.tableUpdateTracker.requiresKeyboardFocusReset&&this.keyboardNavigationManager.resetFocusState()}get ariaMultiSelectable(){switch(this.selectionMode){case rR.multiple:return"true"
11596
+ return e.key===Aa&&this.toggleColumnSort(t,n),!0}update(){if(this.validate(),this.tableUpdateTracker.requiresTanStackUpdate&&this.updateTanStack(),this.tableUpdateTracker.updateRowParentIds||this.tableUpdateTracker.updateGroupRows){const t=this.isHierarchyEnabled(),e=this.columns.some((t=>!t.columnInternals.groupingDisabled))
11597
+ this.canHaveCollapsibleRows=t||e}this.tableUpdateTracker.updateActionMenuSlots&&this.updateActionMenuSlots(),this.tableUpdateTracker.updateColumnWidths&&(this.rowGridColumns=this.layoutManager.getGridTemplateColumns(),this.visibleColumns=this.columns.filter((t=>!t.columnHidden))),this.tableUpdateTracker.requiresKeyboardFocusReset&&this.keyboardNavigationManager.resetFocusState()}get ariaMultiSelectable(){switch(this.selectionMode){case rR.multiple:return"true"
11585
11598
  case rR.single:return"false"
11586
11599
  default:return null}}getHeaderContainerElements(){return this.columnHeadersContainer.querySelectorAll(".header-container")}calculateTanStackData(t){this.dataHierarchyManager=new DF(t,this.idFieldName,this.parentIdFieldName)
11587
11600
  const e=this.dataHierarchyManager.hierarchicalData
@@ -11626,7 +11639,7 @@ if("string"==typeof n)return e.clientRecord[n]},sortingFn:gF(t.columnInternals.s
11626
11639
  const e={},n=this.tableValidator.getPresentRecordIds(t)
11627
11640
  for(const t of n)if(e[t]=!0,this.selectionMode===rR.single)break
11628
11641
  return e}}
11629
- t([ft({attribute:"id-field-name"})],FF.prototype,"idFieldName",void 0),t([ft({attribute:"parent-id-field-name"})],FF.prototype,"parentIdFieldName",void 0),t([ft({attribute:"selection-mode"})],FF.prototype,"selectionMode",void 0),t([C],FF.prototype,"tableData",void 0),t([C],FF.prototype,"columns",void 0),t([C],FF.prototype,"childItems",void 0),t([C],FF.prototype,"rowElements",void 0),t([C],FF.prototype,"openActionMenuRecordId",void 0),t([C],FF.prototype,"canRenderRows",void 0),t([C],FF.prototype,"scrollX",void 0),t([C],FF.prototype,"rowGridColumns",void 0),t([C],FF.prototype,"selectionState",void 0),t([C],FF.prototype,"selectionCheckbox",void 0),t([C],FF.prototype,"collapseAllButton",void 0),t([C],FF.prototype,"showCollapseAll",void 0),t([C],FF.prototype,"firstSortedColumn",void 0),t([C],FF.prototype,"visibleColumns",void 0),t([C],FF.prototype,"tableScrollableMinWidth",void 0),t([C],FF.prototype,"windowShiftKeyDown",void 0)
11642
+ t([ft({attribute:"id-field-name"})],FF.prototype,"idFieldName",void 0),t([ft({attribute:"parent-id-field-name"})],FF.prototype,"parentIdFieldName",void 0),t([ft({attribute:"selection-mode"})],FF.prototype,"selectionMode",void 0),t([C],FF.prototype,"tableData",void 0),t([C],FF.prototype,"columns",void 0),t([C],FF.prototype,"childItems",void 0),t([C],FF.prototype,"rowElements",void 0),t([C],FF.prototype,"openActionMenuRecordId",void 0),t([C],FF.prototype,"canRenderRows",void 0),t([C],FF.prototype,"scrollX",void 0),t([C],FF.prototype,"rowGridColumns",void 0),t([C],FF.prototype,"selectionState",void 0),t([C],FF.prototype,"selectionCheckbox",void 0),t([C],FF.prototype,"collapseAllButton",void 0),t([C],FF.prototype,"showCollapseAll",void 0),t([C],FF.prototype,"canHaveCollapsibleRows",void 0),t([k],FF.prototype,"collapseButtonVisibility",null),t([C],FF.prototype,"firstSortedColumn",void 0),t([C],FF.prototype,"visibleColumns",void 0),t([C],FF.prototype,"tableScrollableMinWidth",void 0),t([C],FF.prototype,"windowShiftKeyDown",void 0)
11630
11643
  const NF=FF.compose({baseName:"table",template:nF,styles:RR})
11631
11644
  _i.getOrCreate().withPrefix("nimble").register(NF())
11632
11645
  const LF=Mt`