@patternfly/react-core 4.243.0 → 4.243.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.243.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.243.0...@patternfly/react-core@4.243.1) (2022-09-29)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 # [4.243.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.242.8...@patternfly/react-core@4.243.0) (2022-09-29)
 
 

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

@@ -1296,41 +1296,6 @@ textarea.pf-c-form-control {
     display: none !important;
   }
 }
-.pf-c-back-to-top {
-  --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
-  --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
-  --pf-c-back-to-top--md--Bottom: var(--pf-global--spacer--2xl);
-  --pf-c-back-to-top--c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-back-to-top--c-button--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-back-to-top--c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-back-to-top--c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-back-to-top--c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-back-to-top--c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-back-to-top--c-button--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
-  position: absolute;
-  right: var(--pf-c-back-to-top--Right);
-  bottom: var(--pf-c-back-to-top--Bottom);
-}
-
-@media (min-width: 768px) {
-  .pf-c-back-to-top {
-    --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom);
-  }
-}
-.pf-c-back-to-top.pf-m-hidden {
-  display: none;
-}
-
-.pf-c-back-to-top .pf-c-button {
-  --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize);
-  --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius);
-  --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop);
-  --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight);
-  --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft);
-  box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow);
-}
-
 .pf-c-avatar {
   --pf-c-avatar--BorderColor: transparent;
   --pf-c-avatar--BorderWidth: 0;
@@ -1585,6 +1550,41 @@ textarea.pf-c-form-control {
     --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height-on-2xl, var(--pf-c-avatar--m-xl--Height-on-xl, var(--pf-c-avatar--m-xl--Height-on-lg, var(--pf-c-avatar--m-xl--Height-on-md, var(--pf-c-avatar--m-xl--Height-on-sm, var(--pf-c-avatar--m-xl--Height))))));
   }
 }
+.pf-c-back-to-top {
+  --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
+  --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
+  --pf-c-back-to-top--md--Bottom: var(--pf-global--spacer--2xl);
+  --pf-c-back-to-top--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-back-to-top--c-button--BorderRadius: var(--pf-global--BorderRadius--lg);
+  --pf-c-back-to-top--c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-back-to-top--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-back-to-top--c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-back-to-top--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-back-to-top--c-button--BoxShadow: var(--pf-global--BoxShadow--lg-bottom);
+  position: absolute;
+  right: var(--pf-c-back-to-top--Right);
+  bottom: var(--pf-c-back-to-top--Bottom);
+}
+
+@media (min-width: 768px) {
+  .pf-c-back-to-top {
+    --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom);
+  }
+}
+.pf-c-back-to-top.pf-m-hidden {
+  display: none;
+}
+
+.pf-c-back-to-top .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize);
+  --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius);
+  --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop);
+  --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight);
+  --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft);
+  box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow);
+}
+
 .pf-c-background-image {
   --pf-c-background-image--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-background-image--BackgroundImage: url("../../assets/images/pfbg_576.jpg");
@@ -19332,166 +19332,6 @@ svg.pf-c-spinner.pf-m-xl {
     transform: rotate(720deg);
   }
 }
-.pf-c-switch {
-  --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
-  --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
-  --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
-  --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
-  --pf-c-switch__toggle-icon--Offset: 0.125rem;
-  --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-switch--Height: auto;
-  --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
-  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
-  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
-  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
-  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
-  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
-  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
-  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
-  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
-  --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
-  --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
-  --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
-  --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
-  --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
-  position: relative;
-  display: inline-grid;
-  grid-template-columns: auto;
-  grid-auto-columns: 1fr;
-  column-gap: var(--pf-c-switch--ColumnGap);
-  height: var(--pf-c-switch--Height);
-  font-size: var(--pf-c-switch--FontSize);
-  line-height: var(--pf-c-switch--LineHeight);
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-.pf-c-switch.pf-m-reverse .pf-c-switch__label,
-.pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
-  grid-row: 1;
-}
-
-.pf-c-switch.pf-m-reverse .pf-c-switch__label {
-  grid-column: 1;
-}
-
-.pf-c-switch__input {
-  position: absolute;
-  cursor: pointer;
-  opacity: 0;
-}
-
-.pf-c-switch__input:focus ~ .pf-c-switch__toggle {
-  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
-  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
-}
-
-.pf-c-switch__input:checked ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--checked__label--Color);
-}
-
-.pf-c-switch__input:checked ~ .pf-c-switch__toggle {
-  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
-}
-
-.pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
-  transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
-}
-
-.pf-c-switch__input:checked ~ .pf-m-off {
-  display: none;
-}
-
-.pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--not-checked__label--Color);
-}
-
-.pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
-  display: none;
-  visibility: hidden;
-}
-
-.pf-c-switch__input:not(:checked) ~ .pf-m-on {
-  display: none;
-}
-
-.pf-c-switch__input:disabled {
-  cursor: not-allowed;
-}
-
-.pf-c-switch__input:disabled ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--disabled__label--Color);
-  cursor: not-allowed;
-}
-
-.pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
-  cursor: not-allowed;
-  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
-}
-
-.pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
-  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
-}
-
-.pf-c-switch__toggle {
-  position: relative;
-  display: inline-block;
-  width: var(--pf-c-switch__toggle--Width);
-  height: var(--pf-c-switch__toggle--Height);
-  background-color: var(--pf-c-switch__toggle--BackgroundColor);
-  border-radius: var(--pf-c-switch__toggle--BorderRadius);
-}
-
-.pf-c-switch__toggle::before {
-  position: absolute;
-  top: var(--pf-c-switch__toggle--before--Top);
-  left: var(--pf-c-switch__toggle--before--Left);
-  display: block;
-  width: var(--pf-c-switch__toggle--before--Width);
-  height: var(--pf-c-switch__toggle--before--Height);
-  content: "";
-  background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
-  border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
-  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
-  transition: var(--pf-c-switch__toggle--before--Transition);
-}
-
-.pf-c-switch__toggle-icon {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: var(--pf-c-switch__toggle-icon--Left);
-  display: flex;
-  align-items: center;
-  font-size: var(--pf-c-switch__toggle-icon--FontSize);
-  color: var(--pf-c-switch__toggle-icon--Color);
-}
-
-.pf-c-switch__label {
-  display: inline-block;
-  grid-column: 2;
-  color: var(--pf-c-switch__label--Color);
-  vertical-align: top;
-}
-
-:where(.pf-theme-dark) .pf-c-switch {
-  --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
-  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
-  --pf-c-switch__toggle--before--BoxShadow: none;
-}
-
 .pf-c-tabs {
   --pf-c-tabs--inset: 0;
   --pf-c-tabs--Width: auto;
@@ -20501,6 +20341,166 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
 }
 
+.pf-c-switch {
+  --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
+  --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
+  --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
+  --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
+  --pf-c-switch__toggle-icon--Offset: 0.125rem;
+  --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-switch--Height: auto;
+  --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
+  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
+  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
+  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
+  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
+  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
+  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
+  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
+  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
+  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
+  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
+  --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
+  --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
+  --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
+  --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
+  --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
+  --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: auto;
+  grid-auto-columns: 1fr;
+  column-gap: var(--pf-c-switch--ColumnGap);
+  height: var(--pf-c-switch--Height);
+  font-size: var(--pf-c-switch--FontSize);
+  line-height: var(--pf-c-switch--LineHeight);
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.pf-c-switch.pf-m-reverse .pf-c-switch__label,
+.pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
+  grid-row: 1;
+}
+
+.pf-c-switch.pf-m-reverse .pf-c-switch__label {
+  grid-column: 1;
+}
+
+.pf-c-switch__input {
+  position: absolute;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.pf-c-switch__input:focus ~ .pf-c-switch__toggle {
+  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
+  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
+}
+
+.pf-c-switch__input:checked ~ .pf-c-switch__label {
+  color: var(--pf-c-switch__input--checked__label--Color);
+}
+
+.pf-c-switch__input:checked ~ .pf-c-switch__toggle {
+  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
+}
+
+.pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
+  transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
+}
+
+.pf-c-switch__input:checked ~ .pf-m-off {
+  display: none;
+}
+
+.pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
+  color: var(--pf-c-switch__input--not-checked__label--Color);
+}
+
+.pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
+  display: none;
+  visibility: hidden;
+}
+
+.pf-c-switch__input:not(:checked) ~ .pf-m-on {
+  display: none;
+}
+
+.pf-c-switch__input:disabled {
+  cursor: not-allowed;
+}
+
+.pf-c-switch__input:disabled ~ .pf-c-switch__label {
+  color: var(--pf-c-switch__input--disabled__label--Color);
+  cursor: not-allowed;
+}
+
+.pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
+  cursor: not-allowed;
+  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
+}
+
+.pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
+  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
+}
+
+.pf-c-switch__toggle {
+  position: relative;
+  display: inline-block;
+  width: var(--pf-c-switch__toggle--Width);
+  height: var(--pf-c-switch__toggle--Height);
+  background-color: var(--pf-c-switch__toggle--BackgroundColor);
+  border-radius: var(--pf-c-switch__toggle--BorderRadius);
+}
+
+.pf-c-switch__toggle::before {
+  position: absolute;
+  top: var(--pf-c-switch__toggle--before--Top);
+  left: var(--pf-c-switch__toggle--before--Left);
+  display: block;
+  width: var(--pf-c-switch__toggle--before--Width);
+  height: var(--pf-c-switch__toggle--before--Height);
+  content: "";
+  background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
+  border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
+  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
+  transition: var(--pf-c-switch__toggle--before--Transition);
+}
+
+.pf-c-switch__toggle-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--pf-c-switch__toggle-icon--Left);
+  display: flex;
+  align-items: center;
+  font-size: var(--pf-c-switch__toggle-icon--FontSize);
+  color: var(--pf-c-switch__toggle-icon--Color);
+}
+
+.pf-c-switch__label {
+  display: inline-block;
+  grid-column: 2;
+  color: var(--pf-c-switch__label--Color);
+  vertical-align: top;
+}
+
+:where(.pf-theme-dark) .pf-c-switch {
+  --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
+  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
+  --pf-c-switch__toggle--before--BoxShadow: none;
+}
+
 .pf-c-content {
   --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
   --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
@@ -27499,18 +27499,6 @@ label.pf-c-tree-view__node-text {
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
-.pf-l-level {
-  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.pf-l-level.pf-m-gutter > *:not(:last-child) {
-  margin-right: var(--pf-l-level--m-gutter--MarginRight);
-}
-
 .pf-l-split {
   --pf-l-split--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;
@@ -27530,6 +27518,18 @@ label.pf-c-tree-view__node-text {
   margin-right: var(--pf-l-split--m-gutter--MarginRight);
 }
 
+.pf-l-level {
+  --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.pf-l-level.pf-m-gutter > *:not(:last-child) {
+  margin-right: var(--pf-l-level--m-gutter--MarginRight);
+}
+
 .pf-l-stack {
   --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.243.0",
+  "version": "4.243.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "51b287699eb4b522491b3ade19a8d16b68b5b4da"
+  "gitHead": "eb89462c9bbd1414e2da9f3b77601f965ba03bf2"
 }

package/src/components/NumberInput/examples/NumberInput.md

@@ -9,479 +9,40 @@ propComponents: ['NumberInput']
 
 ### Default
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class BasicNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 90
-    };
-
-    this.onMinus = () => {
-      this.setState({
-        value: this.state.value - 1
-      });
-    };
-
-    this.onChange = event => {
-      this.setState({
-        value: Number(event.target.value)
-      });
-    };
-
-    this.onPlus = () => {
-      this.setState({
-        value: this.state.value + 1
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    return (
-      <NumberInput
-        value={value}
-        onMinus={this.onMinus}
-        onChange={this.onChange}
-        onPlus={this.onPlus}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-      />
-    );
-  }
-}
+```ts file="./NumberInputDefault.tsx"
 ```
 
 ### With unit
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class UnitNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: 90,
-      value2: (1.0).toFixed(2)
-    };
-
-    this.onMinus1 = () => {
-      this.setState({
-        value1: this.state.value1 - 1
-      });
-    };
-
-    this.onChange1 = event => {
-      this.setState({
-        value1: Number(event.target.value)
-      });
-    };
-
-    this.onPlus1 = () => {
-      this.setState({
-        value1: this.state.value1 + 1
-      });
-    };
-
-    this.onMinus2 = () => {
-      this.setState({
-        value2: (Number(this.state.value2) - 0.01).toFixed(2)
-      });
-    };
-
-    this.onChange2 = event => {
-      this.setState({
-        value2: event.target.value
-      });
-    };
-
-    this.onPlus2 = () => {
-      this.setState({
-        value2: (Number(this.state.value2) + 0.01).toFixed(2)
-      });
-    };
-  }
-
-  render() {
-    const { value1, value2 } = this.state;
-    return (
-      <React.Fragment>
-        <NumberInput
-          value={value1}
-          onMinus={this.onMinus1}
-          onChange={this.onChange1}
-          onPlus={this.onPlus1}
-          inputName="input 1"
-          inputAriaLabel="number input 1"
-          minusBtnAriaLabel="minus 1"
-          plusBtnAriaLabel="plus 1"
-          unit="%"
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={value2}
-          onMinus={this.onMinus2}
-          onChange={this.onChange2}
-          onPlus={this.onPlus2}
-          inputName="input 2"
-          inputAriaLabel="number input 2"
-          minusBtnAriaLabel="minus 0.01"
-          plusBtnAriaLabel="plus 0.01"
-          unit="$"
-          unitPosition="before"
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./NumberInputUnit.tsx"
 ```
 
 ### With unit and thresholds
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class UnitThresholdNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 0
-    };
-    this.minValue = 0;
-    this.maxValue = 10;
-
-    this.normalizeBetween = (value, min, max) => {
-      if (min !== undefined && max !== undefined) {
-        return Math.max(Math.min(value, max), min);
-      } else if (value <= min) {
-        return min;
-      } else if (value >= max) {
-        return max;
-      }
-      return value;
-    };
-
-    this.onMinus = () => {
-      this.setState({
-        value: this.normalizeBetween(this.state.value - 1, this.minValue, this.maxValue)
-      });
-    };
-
-    this.onChange = event => {
-      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
-      this.setState({
-        value: newValue > this.maxValue ? this.maxValue : newValue < this.minValue ? this.minValue : newValue
-      });
-    };
-
-    this.onPlus = () => {
-      this.setState({
-        value: this.normalizeBetween(this.state.value + 1, this.minValue, this.maxValue)
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <React.Fragment>
-        With a minimum value of 0 and maximum value of 10
-        <br />
-        <NumberInput
-          value={value}
-          min={this.minValue}
-          max={this.maxValue}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input"
-          inputAriaLabel="number input"
-          minusBtnAriaLabel="minus"
-          plusBtnAriaLabel="plus"
-          unit="%"
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./NumberInputUnitThreshold.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class DisabledNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 100
-    };
-
-    this.onMinus = () => {
-      this.setState({
-        value: this.state.value - 1
-      });
-    };
-
-    this.onChange = event => {
-      this.setState({
-        value: Number(event.target.value)
-      });
-    };
-
-    this.onPlus = () => {
-      this.setState({
-        value: this.state.value + 1
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    const minValue = 0;
-    const maxValue = 100;
-
-    return (
-      <NumberInput
-        value={value}
-        min={minValue}
-        max={maxValue}
-        onMinus={this.onMinus}
-        onChange={this.onChange}
-        onPlus={this.onPlus}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-        unit="%"
-        isDisabled
-      />
-    );
-  }
-}
-
+```ts file="./NumberInputDisabled.tsx"
 ```
+
 ### With status
 
-```ts file="./WithStatus.tsx"
+```ts file="./NumberInputWithStatus.tsx"
 ```
 
 ### Varying sizes
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class NumberInputSizes extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      input1Value: 1,
-      input2Value: 1234567890,
-      input3Value: 5,
-      input4Value: 12345
-    };
-
-    this.onChange = event => {
-      this.setState({
-        [`${event.target.name}Value`]: Number(event.target.value)
-      });
-    };
-
-    this.onMinus = (e, inputName) => {
-      this.setState({
-        [`${inputName}Value`]: this.state[`${inputName}Value`] - 1
-      });
-    };
-
-    this.onPlus = (e, inputName) => {
-      this.setState({
-        [`${inputName}Value`]: this.state[`${inputName}Value`] + 1
-      });
-    };
-  }
-
-  render() {
-    const { input1Value, input2Value, input3Value, input4Value } = this.state;
-
-    return (
-      <React.Fragment>
-        <NumberInput
-          value={input1Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input1"
-          inputAriaLabel="number input 1"
-          minusBtnAriaLabel="input 2 minus"
-          plusBtnAriaLabel="input 2 plus"
-          widthChars={1}
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={input2Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input2"
-          inputAriaLabel="number input 2"
-          minusBtnAriaLabel="input 2 minus"
-          plusBtnAriaLabel="input 2 plus"
-          widthChars={10}
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={input3Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input3"
-          inputAriaLabel="number input 3"
-          minusBtnAriaLabel="input 3 minus"
-          plusBtnAriaLabel="input 3 plus"
-          widthChars={5}
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={input4Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input4"
-          inputAriaLabel="number input 4"
-          minusBtnAriaLabel="input 4 minus"
-          plusBtnAriaLabel="input 4 plus"
-          widthChars={5}
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./NumberInputVaryingSizes.tsx"
 ```
 
 ### Custom increment/decrement
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class CustomStepNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 90,
-      step: 3
-    };
-
-    this.stepper = step => () => {
-      this.setState(prev => ({ ...prev, value: prev.value + step }));
-    };
-
-    this.onChange = event => {
-      this.setState({
-        value: Number(event.target.value)
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    return (
-      <NumberInput
-        value={value}
-        onMinus={this.stepper(-3)}
-        onChange={this.onChange}
-        onPlus={this.stepper(3)}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-      />
-    );
-  }
-}
+```ts file="./NumberInputCustomStep.tsx"
 ```
 
 ### Custom increment/decrement and thresholds
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class CustomStepNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 90,
-      step: 3
-    };
-    this.minValue = 90;
-    this.maxValue = 100;
-
-    this.normalizeBetween = (value, min, max) => {
-      if (min !== undefined && max !== undefined) {
-        return Math.max(Math.min(value, max), min);
-      } else if (value <= min) {
-        return min;
-      } else if (value >= max) {
-        return max;
-      }
-      return value;
-    };
-
-    this.stepper = step => () => {
-      this.setState(prev => ({
-        ...prev,
-        value: this.normalizeBetween(prev.value + step, this.minValue, this.maxValue)
-      }));
-    };
-
-    this.onChange = event => {
-      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
-      this.setState({
-        value: newValue
-      });
-    };
-
-    this.onBlur = event => {
-      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
-      this.setState({
-        value: newValue > this.maxValue ? this.maxValue : newValue < this.minValue ? this.minValue : newValue
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    return (
-      <NumberInput
-        value={value}
-        min={this.minValue}
-        max={this.maxValue}
-        onMinus={this.stepper(-3)}
-        onChange={this.onChange}
-        onBlur={this.onBlur}
-        onPlus={this.stepper(3)}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-      />
-    );
-  }
-}
+```ts file="./NumberInputCustomStepAndThreshold.tsx"
 ```

package/src/components/NumberInput/examples/NumberInputCustomStep.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputCustomStep: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(90);
+  const step = 3;
+
+  const stepper = (stepValue: number) => {
+    setValue(value + stepValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue(Number(target.value));
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      onMinus={() => stepper(-step)}
+      onChange={onChange}
+      onPlus={() => stepper(step)}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+    />
+  );
+};

package/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(90);
+  const minValue = 90;
+  const maxValue = 100;
+  const step = 3;
+
+  const normalizeBetween = (value, min, max) => {
+    if (min !== undefined && max !== undefined) {
+      return Math.max(Math.min(value, max), min);
+    } else if (value <= min) {
+      return min;
+    } else if (value >= max) {
+      return max;
+    }
+    return value;
+  };
+
+  const stepper = (stepValue: number) => {
+    setValue(value + stepValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onBlur = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
+    setValue(newValue);
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      min={minValue}
+      max={maxValue}
+      onMinus={() => stepper(-step)}
+      onChange={onChange}
+      onBlur={onBlur}
+      onPlus={() => stepper(step)}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+    />
+  );
+};

package/src/components/NumberInput/examples/NumberInputDefault.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputDefault: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(90);
+
+  const onMinus = () => {
+    const newValue = value - 1;
+    setValue(newValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue(Number(target.value));
+  };
+
+  const onPlus = () => {
+    const newValue = value + 1;
+    setValue(newValue);
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      onMinus={onMinus}
+      onChange={onChange}
+      onPlus={onPlus}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+    />
+  );
+};

package/src/components/NumberInput/examples/NumberInputDisabled.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputDisabled: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(100);
+  const minValue = 0;
+  const maxValue = 100;
+
+  const onMinus = () => {
+    const newValue = value - 1;
+    setValue(newValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue(Number(target.value));
+  };
+
+  const onPlus = () => {
+    const newValue = value + 1;
+    setValue(newValue);
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      min={minValue}
+      max={maxValue}
+      onMinus={onMinus}
+      onChange={onChange}
+      onPlus={onPlus}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+      unit="%"
+      isDisabled
+    />
+  );
+};

package/src/components/NumberInput/examples/NumberInputUnit.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputUnit: React.FunctionComponent = () => {
+  const [value1, setValue1] = React.useState(90);
+  const [value2, setValue2] = React.useState(Number((1.0).toFixed(2)));
+
+  const onMinus1 = () => setValue1(value1 - 1);
+  const onChange1 = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue1(Number(target.value));
+  };
+  const onPlus1 = () => setValue1(value1 + 1);
+
+  const onMinus2 = () => {
+    const newValue = Number((value2 - 0.01).toFixed(2));
+    setValue2(newValue);
+  };
+  const onChange2 = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue2(Number(target.value));
+  };
+  const onPlus2 = () => {
+    const newValue = Number((value2 + 0.01).toFixed(2));
+    setValue2(newValue);
+  };
+
+  return (
+    <React.Fragment>
+      <NumberInput
+        value={value1}
+        onMinus={onMinus1}
+        onChange={onChange1}
+        onPlus={onPlus1}
+        inputName="input 1"
+        inputAriaLabel="number input 1"
+        minusBtnAriaLabel="minus 1"
+        plusBtnAriaLabel="plus 1"
+        unit="%"
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={value2}
+        onMinus={onMinus2}
+        onChange={onChange2}
+        onPlus={onPlus2}
+        inputName="input 2"
+        inputAriaLabel="number input 2"
+        minusBtnAriaLabel="minus 0.01"
+        plusBtnAriaLabel="plus 0.01"
+        unit="$"
+        unitPosition="before"
+      />
+    </React.Fragment>
+  );
+};

package/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputUnitThreshold: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(0);
+  const minValue = 0;
+  const maxValue = 10;
+
+  const normalizeBetween = (value, min, max) => {
+    if (min !== undefined && max !== undefined) {
+      return Math.max(Math.min(value, max), min);
+    } else if (value <= min) {
+      return min;
+    } else if (value >= max) {
+      return max;
+    }
+    return value;
+  };
+
+  const onMinus = () => {
+    const newValue = normalizeBetween(value - 1, minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onPlus = () => {
+    const newValue = normalizeBetween(value + 1, minValue, maxValue);
+    setValue(newValue);
+  };
+
+  return (
+    <React.Fragment>
+      With a minimum value of 0 and maximum value of 10
+      <br />
+      <NumberInput
+        value={value}
+        min={minValue}
+        max={maxValue}
+        onMinus={onMinus}
+        onChange={onChange}
+        onPlus={onPlus}
+        inputName="input"
+        inputAriaLabel="number input"
+        minusBtnAriaLabel="minus"
+        plusBtnAriaLabel="plus"
+        unit="%"
+      />
+    </React.Fragment>
+  );
+};

package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputVaryingSizes: React.FunctionComponent = () => {
+  const [input1Value, setInput1Value] = React.useState(1);
+  const [input2Value, setInput2Value] = React.useState(1234567890);
+  const [input3Value, setInput3Value] = React.useState(5);
+  const [input4Value, setInput4Value] = React.useState(12345);
+
+  const onChange = (
+    event: React.FormEvent<HTMLInputElement>,
+    updateFunction: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    const target = event.target as HTMLInputElement;
+    updateFunction(Number(target.value));
+  };
+
+  const onMinus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
+    updateFunction(value - 1);
+  };
+
+  const onPlus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
+    updateFunction(value + 1);
+  };
+
+  return (
+    <React.Fragment>
+      <NumberInput
+        value={input1Value}
+        onMinus={() => onMinus(input1Value, setInput1Value)}
+        onChange={event => onChange(event, setInput1Value)}
+        onPlus={() => onPlus(input1Value, setInput1Value)}
+        inputName="input1"
+        inputAriaLabel="number input 1"
+        minusBtnAriaLabel="input 2 minus"
+        plusBtnAriaLabel="input 2 plus"
+        widthChars={1}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input2Value}
+        onMinus={() => onMinus(input2Value, setInput2Value)}
+        onChange={event => onChange(event, setInput2Value)}
+        onPlus={() => onPlus(input2Value, setInput2Value)}
+        inputName="input2"
+        inputAriaLabel="number input 2"
+        minusBtnAriaLabel="input 2 minus"
+        plusBtnAriaLabel="input 2 plus"
+        widthChars={10}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input3Value}
+        onMinus={() => onMinus(input3Value, setInput3Value)}
+        onChange={event => onChange(event, setInput3Value)}
+        onPlus={() => onPlus(input3Value, setInput3Value)}
+        inputName="input3"
+        inputAriaLabel="number input 3"
+        minusBtnAriaLabel="input 3 minus"
+        plusBtnAriaLabel="input 3 plus"
+        widthChars={5}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input4Value}
+        onMinus={() => onMinus(input4Value, setInput4Value)}
+        onChange={event => onChange(event, setInput4Value)}
+        onPlus={() => onPlus(input4Value, setInput4Value)}
+        inputName="input4"
+        inputAriaLabel="number input 4"
+        minusBtnAriaLabel="input 4 minus"
+        plusBtnAriaLabel="input 4 plus"
+        widthChars={5}
+      />
+    </React.Fragment>
+  );
+};

package/src/components/NumberInput/examples/{WithStatus.tsx → NumberInputWithStatus.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NumberInput, ValidatedOptions } from '@patternfly/react-core';
 
-export const WithStatus: React.FunctionComponent = () => {
+export const NumberInputWithStatus: React.FunctionComponent = () => {
   const max = 10;
   const min = 0;
 
@@ -20,8 +20,9 @@ export const WithStatus: React.FunctionComponent = () => {
     validate(newVal);
   };
 
-  const onChange = event => {
-    const newVal = isNaN(event.target.value) ? 5 : Number(event.target.value);
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newVal = isNaN(+target.value) ? 5 : Number(target.value);
     setValue(newVal);
     validate(newVal);
   };