@patternfly/react-table 4.54.0 → 4.54.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.54.1 (2022-01-11)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
 # 4.54.0 (2022-01-11)
 
 

package/dist/umd/react-table.min.css

@@ -19323,185 +19323,6 @@ ul.pf-c-list {
     --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
   }
 }
-.pf-c-progress {
-  --pf-c-progress--GridGap: var(--pf-global--spacer--md);
-  --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
-  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
-  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
-  --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-progress__bar--before--Opacity: .2;
-  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
-  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
-  --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
-  --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100);
-  --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100);
-  --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100);
-  --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100);
-  --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100);
-  --pf-c-progress--m-inside__indicator--MinWidth: var(--pf-global--spacer--xl);
-  --pf-c-progress--m-inside__measure--Color: var(--pf-global--Color--light-100);
-  --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100);
-  --pf-c-progress--m-warning--m-inside__measure--Color: var(--pf-global--Color--dark-100);
-  --pf-c-progress--m-inside__measure--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm);
-  --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-progress--m-sm__measure--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg);
-  display: grid;
-  align-items: end;
-  grid-gap: var(--pf-c-progress--GridGap);
-  grid-template-columns: auto auto;
-  grid-template-rows: 1fr auto;
-}
-
-.pf-c-progress.pf-m-sm {
-  --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
-}
-
-.pf-c-progress.pf-m-sm .pf-c-progress__description {
-  font-size: var(--pf-c-progress--m-sm__description--FontSize);
-}
-
-.pf-c-progress.pf-m-sm .pf-c-progress__measure {
-  font-size: var(--pf-c-progress--m-sm__measure--FontSize);
-}
-
-.pf-c-progress.pf-m-lg {
-  --pf-c-progress__bar--Height: var(--pf-c-progress--m-lg__bar--Height);
-}
-
-.pf-c-progress.pf-m-inside .pf-c-progress__indicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--pf-c-progress--m-inside__indicator--MinWidth);
-}
-
-.pf-c-progress.pf-m-inside .pf-c-progress__measure {
-  font-size: var(--pf-c-progress--m-inside__measure--FontSize);
-  color: var(--pf-c-progress--m-inside__measure--Color);
-  text-align: center;
-}
-
-.pf-c-progress.pf-m-outside .pf-c-progress__description {
-  grid-column: 1/3;
-}
-
-.pf-c-progress.pf-m-outside .pf-c-progress__status {
-  grid-column: 2/3;
-  grid-row: 2/3;
-  align-self: center;
-}
-
-.pf-c-progress.pf-m-outside .pf-c-progress__measure {
-  display: inline-block;
-  font-size: var(--pf-c-progress--m-outside__measure--FontSize);
-}
-
-.pf-c-progress.pf-m-outside .pf-c-progress__measure.pf-m-static-width {
-  min-width: var(--pf-c-progress__measure--m-static-width--MinWidth);
-  text-align: left;
-}
-
-.pf-c-progress.pf-m-outside .pf-c-progress__bar,
-.pf-c-progress.pf-m-outside .pf-c-progress__indicator {
-  grid-column: 1/2;
-}
-
-.pf-c-progress.pf-m-singleline {
-  grid-template-rows: 1fr;
-}
-
-.pf-c-progress.pf-m-singleline .pf-c-progress__description {
-  display: none;
-  visibility: hidden;
-}
-
-.pf-c-progress.pf-m-singleline .pf-c-progress__bar {
-  grid-row: 1/2;
-  grid-column: 1/2;
-}
-
-.pf-c-progress.pf-m-singleline .pf-c-progress__status {
-  grid-row: 1/2;
-  grid-column: 2/3;
-}
-
-.pf-c-progress.pf-m-outside, .pf-c-progress.pf-m-singleline {
-  grid-template-columns: 1fr fit-content(50%);
-}
-
-.pf-c-progress.pf-m-success {
-  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-success__bar--BackgroundColor);
-  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-success__status-icon--Color);
-  --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-success--m-inside__measure--Color);
-}
-
-.pf-c-progress.pf-m-warning {
-  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-warning__bar--BackgroundColor);
-  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-warning__status-icon--Color);
-  --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-warning--m-inside__measure--Color);
-}
-
-.pf-c-progress.pf-m-danger {
-  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-danger__bar--BackgroundColor);
-  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-danger__status-icon--Color);
-}
-
-.pf-c-progress__description {
-  word-break: break-word;
-  grid-column: 1/2;
-}
-
-.pf-c-progress__description.pf-m-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pf-c-progress__status {
-  grid-column: 2/3;
-  grid-row: 1/2;
-  text-align: right;
-  word-break: break-word;
-}
-
-.pf-c-progress__status-icon {
-  margin-left: var(--pf-c-progress__status-icon--MarginLeft);
-  color: var(--pf-c-progress__status-icon--Color);
-}
-
-.pf-c-progress__bar {
-  position: relative;
-  grid-column: 1/3;
-  grid-row: 2/3;
-  align-self: center;
-  height: var(--pf-c-progress__bar--Height);
-  background-color: var(--pf-c-progress__bar--BackgroundColor);
-}
-
-.pf-c-progress__bar::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  content: "";
-  background-color: var(--pf-c-progress__bar--before--BackgroundColor);
-  opacity: var(--pf-c-progress__bar--before--Opacity);
-}
-
-.pf-c-progress__indicator {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: var(--pf-c-progress__indicator--Height);
-  background-color: var(--pf-c-progress__indicator--BackgroundColor);
-}
-
 .pf-c-popover {
   --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
@@ -19694,6 +19515,185 @@ ul.pf-c-list {
   margin-top: var(--pf-c-popover__footer--MarginTop);
 }
 
+.pf-c-progress {
+  --pf-c-progress--GridGap: var(--pf-global--spacer--md);
+  --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
+  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
+  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
+  --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-progress__bar--before--Opacity: .2;
+  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
+  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
+  --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100);
+  --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100);
+  --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100);
+  --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100);
+  --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100);
+  --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100);
+  --pf-c-progress--m-inside__indicator--MinWidth: var(--pf-global--spacer--xl);
+  --pf-c-progress--m-inside__measure--Color: var(--pf-global--Color--light-100);
+  --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100);
+  --pf-c-progress--m-warning--m-inside__measure--Color: var(--pf-global--Color--dark-100);
+  --pf-c-progress--m-inside__measure--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm);
+  --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-progress--m-sm__measure--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg);
+  display: grid;
+  align-items: end;
+  grid-gap: var(--pf-c-progress--GridGap);
+  grid-template-columns: auto auto;
+  grid-template-rows: 1fr auto;
+}
+
+.pf-c-progress.pf-m-sm {
+  --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
+}
+
+.pf-c-progress.pf-m-sm .pf-c-progress__description {
+  font-size: var(--pf-c-progress--m-sm__description--FontSize);
+}
+
+.pf-c-progress.pf-m-sm .pf-c-progress__measure {
+  font-size: var(--pf-c-progress--m-sm__measure--FontSize);
+}
+
+.pf-c-progress.pf-m-lg {
+  --pf-c-progress__bar--Height: var(--pf-c-progress--m-lg__bar--Height);
+}
+
+.pf-c-progress.pf-m-inside .pf-c-progress__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--pf-c-progress--m-inside__indicator--MinWidth);
+}
+
+.pf-c-progress.pf-m-inside .pf-c-progress__measure {
+  font-size: var(--pf-c-progress--m-inside__measure--FontSize);
+  color: var(--pf-c-progress--m-inside__measure--Color);
+  text-align: center;
+}
+
+.pf-c-progress.pf-m-outside .pf-c-progress__description {
+  grid-column: 1/3;
+}
+
+.pf-c-progress.pf-m-outside .pf-c-progress__status {
+  grid-column: 2/3;
+  grid-row: 2/3;
+  align-self: center;
+}
+
+.pf-c-progress.pf-m-outside .pf-c-progress__measure {
+  display: inline-block;
+  font-size: var(--pf-c-progress--m-outside__measure--FontSize);
+}
+
+.pf-c-progress.pf-m-outside .pf-c-progress__measure.pf-m-static-width {
+  min-width: var(--pf-c-progress__measure--m-static-width--MinWidth);
+  text-align: left;
+}
+
+.pf-c-progress.pf-m-outside .pf-c-progress__bar,
+.pf-c-progress.pf-m-outside .pf-c-progress__indicator {
+  grid-column: 1/2;
+}
+
+.pf-c-progress.pf-m-singleline {
+  grid-template-rows: 1fr;
+}
+
+.pf-c-progress.pf-m-singleline .pf-c-progress__description {
+  display: none;
+  visibility: hidden;
+}
+
+.pf-c-progress.pf-m-singleline .pf-c-progress__bar {
+  grid-row: 1/2;
+  grid-column: 1/2;
+}
+
+.pf-c-progress.pf-m-singleline .pf-c-progress__status {
+  grid-row: 1/2;
+  grid-column: 2/3;
+}
+
+.pf-c-progress.pf-m-outside, .pf-c-progress.pf-m-singleline {
+  grid-template-columns: 1fr fit-content(50%);
+}
+
+.pf-c-progress.pf-m-success {
+  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-success__bar--BackgroundColor);
+  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-success__status-icon--Color);
+  --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-success--m-inside__measure--Color);
+}
+
+.pf-c-progress.pf-m-warning {
+  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-warning__bar--BackgroundColor);
+  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-warning__status-icon--Color);
+  --pf-c-progress--m-inside__measure--Color: var(--pf-c-progress--m-warning--m-inside__measure--Color);
+}
+
+.pf-c-progress.pf-m-danger {
+  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-danger__bar--BackgroundColor);
+  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-danger__status-icon--Color);
+}
+
+.pf-c-progress__description {
+  word-break: break-word;
+  grid-column: 1/2;
+}
+
+.pf-c-progress__description.pf-m-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-c-progress__status {
+  grid-column: 2/3;
+  grid-row: 1/2;
+  text-align: right;
+  word-break: break-word;
+}
+
+.pf-c-progress__status-icon {
+  margin-left: var(--pf-c-progress__status-icon--MarginLeft);
+  color: var(--pf-c-progress__status-icon--Color);
+}
+
+.pf-c-progress__bar {
+  position: relative;
+  grid-column: 1/3;
+  grid-row: 2/3;
+  align-self: center;
+  height: var(--pf-c-progress__bar--Height);
+  background-color: var(--pf-c-progress__bar--BackgroundColor);
+}
+
+.pf-c-progress__bar::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-color: var(--pf-c-progress__bar--before--BackgroundColor);
+  opacity: var(--pf-c-progress__bar--before--Opacity);
+}
+
+.pf-c-progress__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: var(--pf-c-progress__indicator--Height);
+  background-color: var(--pf-c-progress__indicator--BackgroundColor);
+}
+
 .pf-c-progress-stepper {
   --pf-c-progress-stepper--GridAutoFlow: column;
   --pf-c-progress-stepper--GridTemplateRows: auto 1fr;
@@ -27752,6 +27752,75 @@ label.pf-c-radio, .pf-c-radio__label,
     --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
   }
 }
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
   --pf-l-grid__item--GridColumnStart: auto;
@@ -28966,75 +29035,6 @@ label.pf-c-radio, .pf-c-radio__label,
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-l-level {
   --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "4.54.0",
+  "version": "4.54.1",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -31,10 +31,10 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.185.0",
-    "@patternfly/react-icons": "^4.36.0",
-    "@patternfly/react-styles": "^4.35.0",
-    "@patternfly/react-tokens": "^4.37.0",
+    "@patternfly/react-core": "^4.185.1",
+    "@patternfly/react-icons": "^4.36.1",
+    "@patternfly/react-styles": "^4.35.1",
+    "@patternfly/react-tokens": "^4.37.1",
     "lodash": "^4.17.19",
     "tslib": "^2.0.0"
   },
@@ -46,5 +46,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "ef19da8ae08dfd6581f25f116e43687cc9f0ce67"
+  "gitHead": "430fd806b786f8869adfd434ea94b1e3b272d833"
 }

package/src/components/TableComposable/examples/ComposableTable.md

@@ -344,3 +344,8 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row
 
 ```ts file="ComposableTableNestedExpandable.tsx"
 ```
+
+### Composable: Expandable with nested table
+
+```ts file="ComposableTableNestedTableExpandable.tsx"
+```

package/src/components/TableComposable/examples/ComposableTableNestedTableExpandable.tsx

@@ -0,0 +1,189 @@
+/* eslint-disable no-console */
+import React from 'react';
+import {
+  TableComposable,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  ExpandableRowContent,
+  ActionsColumn,
+  IAction
+} from '@patternfly/react-table';
+
+interface Repository {
+  name: string;
+  branches: string;
+  prs: string;
+  nestedComponent?: React.ReactNode;
+  link?: React.ReactNode;
+  noPadding?: boolean;
+}
+interface NestedRepository {
+  name: string;
+  branches: string | null;
+  prs: string | null;
+  workspaces: string | null;
+  lastCommit: string | null;
+}
+
+const NestedReposTable: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const prs: NestedRepository[] = [
+    { name: 'Repository 1', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' },
+    { name: 'Repository 2', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' },
+    { name: 'Repository 3', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' },
+    { name: 'Repository 4', branches: '25', prs: '25', workspaces: '5', lastCommit: '2 days ago' }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    workspaces: 'Workspaces',
+    lastCommit: 'Last commit'
+  };
+
+  return (
+    <TableComposable aria-label="Simple table" variant="compact">
+      <Thead>
+        <Tr>
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.workspaces}</Th>
+          <Th>{columnNames.lastCommit}</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {prs.map(repo => (
+          <Tr key={repo.name}>
+            <Td dataLabel={columnNames.name}>{repo.name}</Td>
+            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
+            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
+            <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
+            <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </TableComposable>
+  );
+};
+
+export const ComposableTableExpandable: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const repositories: Repository[] = [
+    { name: 'Node 1', branches: '10', prs: '2', nestedComponent: <NestedReposTable />, link: <a>Link 1</a> },
+    { name: 'Node 2', branches: '3', prs: '4', link: <a>Link 2</a> },
+    {
+      name: 'Node 3',
+      branches: '11',
+      prs: '7',
+      nestedComponent: (
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </p>
+      ),
+      link: <a>Link 3</a>
+    },
+    {
+      name: 'Node 4',
+      branches: '11',
+      prs: '7',
+      nestedComponent: 'Expandable row content has no padding.',
+      link: <a>Link 4</a>,
+      noPadding: true
+    }
+  ];
+
+  const columnNames = {
+    name: 'Repositories',
+    branches: 'Branches',
+    prs: 'Pull requests',
+    link: 'Link',
+    action: 'Action'
+  };
+  // In this example, expanded rows are tracked by the repo names from each row. This could be any unique identifier.
+  // This is to prevent state from being based on row order index in case we later add sorting.
+  // Note that this behavior is very similar to selection state.
+  const initialExpandedRepoNames = repositories.filter(repo => !!repo.nestedComponent).map(repo => repo.name); // Default to all expanded
+  const [expandedRepoNames, setExpandedRepoNames] = React.useState<string[]>(initialExpandedRepoNames);
+  const setRepoExpanded = (repo: Repository, isExpanding = true) =>
+    setExpandedRepoNames(prevExpanded => {
+      const otherExpandedRepoNames = prevExpanded.filter(r => r !== repo.name);
+      return isExpanding ? [...otherExpandedRepoNames, repo.name] : otherExpandedRepoNames;
+    });
+  const isRepoExpanded = (repo: Repository) => expandedRepoNames.includes(repo.name);
+
+  const defaultActions = (repo: Repository): IAction[] => [
+    {
+      title: 'Some action',
+      onClick: () => console.log(`clicked on Some action, on row ${repo.name}`)
+    },
+    {
+      title: <a href="https://www.patternfly.org">Link action</a>
+    },
+    {
+      isSeparator: true
+    },
+    {
+      title: 'Third action',
+      onClick: () => console.log(`clicked on Third action, on row ${repo.name}`)
+    }
+  ];
+
+  return (
+    <TableComposable aria-label="Simple table">
+      <Thead>
+        <Tr>
+          <Td />
+          <Th>{columnNames.name}</Th>
+          <Th>{columnNames.branches}</Th>
+          <Th>{columnNames.prs}</Th>
+          <Th>{columnNames.link}</Th>
+          <Th>{columnNames.action}</Th>
+        </Tr>
+      </Thead>
+      {repositories.map((repo, rowIndex) => (
+        <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
+          <Tr>
+            <Td
+              expand={
+                repo.nestedComponent
+                  ? {
+                      rowIndex,
+                      isExpanded: isRepoExpanded(repo),
+                      onToggle: () => setRepoExpanded(repo, !isRepoExpanded(repo))
+                    }
+                  : undefined
+              }
+            />
+            <Td dataLabel={columnNames.name}>{repo.name}</Td>
+            <Td dataLabel={columnNames.branches}>{repo.branches}</Td>
+            <Td dataLabel={columnNames.prs}>{repo.prs}</Td>
+            <Td dataLabel={columnNames.link}>{repo.link}</Td>
+            <Td dataLabel={columnNames.action}>
+              <ActionsColumn items={defaultActions(repo)} />
+            </Td>
+          </Tr>
+          {repo.nestedComponent ? (
+            <Tr isExpanded={isRepoExpanded(repo)}>
+              <Td
+                noPadding={repo.noPadding}
+                dataLabel={`${columnNames.name} expended`}
+                colSpan={Object.keys(columnNames).length + 1}
+              >
+                <ExpandableRowContent>{repo.nestedComponent}</ExpandableRowContent>
+              </Td>
+            </Tr>
+          ) : null}
+        </Tbody>
+      ))}
+    </TableComposable>
+  );
+};