@patternfly/react-table 4.38.1 → 4.39.0

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.
@@ -3618,9 +3618,17 @@
3618
3618
  var _default$f = {
3619
3619
  "modifiers": {
3620
3620
  "top": "pf-m-top",
3621
+ "topLeft": "pf-m-top-left",
3622
+ "topRight": "pf-m-top-right",
3621
3623
  "bottom": "pf-m-bottom",
3624
+ "bottomLeft": "pf-m-bottom-left",
3625
+ "bottomRight": "pf-m-bottom-right",
3622
3626
  "left": "pf-m-left",
3627
+ "leftTop": "pf-m-left-top",
3628
+ "leftBottom": "pf-m-left-bottom",
3623
3629
  "right": "pf-m-right",
3630
+ "rightTop": "pf-m-right-top",
3631
+ "rightBottom": "pf-m-right-bottom",
3624
3632
  "textAlignLeft": "pf-m-text-align-left"
3625
3633
  },
3626
3634
  "tooltip": "pf-c-tooltip",
@@ -6258,6 +6266,8 @@
6258
6266
  "title": "pf-c-title"
6259
6267
  };
6260
6268
 
6269
+ const PopoverContext = React__namespace.createContext({});
6270
+
6261
6271
  const PopoverContent = (_a) => {
6262
6272
  var { className = null, children } = _a, props = __rest$1(_a, ["className", "children"]);
6263
6273
  return (React__namespace.createElement("div", Object.assign({ className: css(_default$5.popoverContent, className) }, props), children));
@@ -6272,7 +6282,7 @@
6272
6282
 
6273
6283
  const PopoverHeader = (_a) => {
6274
6284
  var { children, id } = _a, props = __rest$1(_a, ["children", "id"]);
6275
- return (React__namespace.createElement(Title, Object.assign({ headingLevel: "h6", size: TitleSizes.md, id: id }, props), children));
6285
+ return (React__namespace.createElement(PopoverContext.Consumer, null, ({ headerComponent }) => (React__namespace.createElement(Title, Object.assign({ headingLevel: headerComponent, size: TitleSizes.md, id: id }, props), children))));
6276
6286
  };
6277
6287
  PopoverHeader.displayName = 'PopoverHeader';
6278
6288
 
@@ -6334,9 +6344,9 @@
6334
6344
  PopoverPosition["rightEnd"] = "right-end";
6335
6345
  })(PopoverPosition || (PopoverPosition = {}));
6336
6346
  const Popover = (_a) => {
6337
- var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, footerContent = null, appendTo = () => document.body, hideOnOutsideClick = true, onHide = () => null, onHidden = () => null, onShow = () => null, onShown = () => null, onMount = () => null, zIndex = 9999, minWidth = popoverMinWidth && popoverMinWidth.value, maxWidth = popoverMaxWidth && popoverMaxWidth.value, closeBtnAriaLabel = 'Close', showClose = true, distance = 25,
6347
+ var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, headerComponent = 'h6', footerContent = null, appendTo = () => document.body, hideOnOutsideClick = true, onHide = () => null, onHidden = () => null, onShow = () => null, onShown = () => null, onMount = () => null, zIndex = 9999, minWidth = popoverMinWidth && popoverMinWidth.value, maxWidth = popoverMaxWidth && popoverMaxWidth.value, closeBtnAriaLabel = 'Close', showClose = true, distance = 25,
6338
6348
  // For every initial starting position, there are 3 escape positions
6339
- flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'], animationDuration = 300, id, withFocusTrap: propWithFocusTrap, boundary, tippyProps, reference, hasNoPadding = false, hasAutoWidth = false } = _a, rest = __rest$1(_a, ["children", "position", "enableFlip", "className", "isVisible", "shouldClose", "shouldOpen", 'aria-label', "bodyContent", "headerContent", "footerContent", "appendTo", "hideOnOutsideClick", "onHide", "onHidden", "onShow", "onShown", "onMount", "zIndex", "minWidth", "maxWidth", "closeBtnAriaLabel", "showClose", "distance", "flipBehavior", "animationDuration", "id", "withFocusTrap", "boundary", "tippyProps", "reference", "hasNoPadding", "hasAutoWidth"]);
6349
+ flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'], animationDuration = 300, id, withFocusTrap: propWithFocusTrap, boundary, tippyProps, reference, hasNoPadding = false, hasAutoWidth = false } = _a, rest = __rest$1(_a, ["children", "position", "enableFlip", "className", "isVisible", "shouldClose", "shouldOpen", 'aria-label', "bodyContent", "headerContent", "headerComponent", "footerContent", "appendTo", "hideOnOutsideClick", "onHide", "onHidden", "onShow", "onShown", "onMount", "zIndex", "minWidth", "maxWidth", "closeBtnAriaLabel", "showClose", "distance", "flipBehavior", "animationDuration", "id", "withFocusTrap", "boundary", "tippyProps", "reference", "hasNoPadding", "hasAutoWidth"]);
6340
6350
  {
6341
6351
  boundary !== undefined &&
6342
6352
  console.warn('The Popover boundary prop has been deprecated. If you want to constrain the popper to a specific element use the appendTo prop instead.');
@@ -6514,7 +6524,8 @@
6514
6524
  headerContent && (React__namespace.createElement(PopoverHeader, { id: `popover-${uniqueId}-header` }, typeof headerContent === 'function' ? headerContent(hide) : headerContent)),
6515
6525
  React__namespace.createElement(PopoverBody, { id: `popover-${uniqueId}-body` }, typeof bodyContent === 'function' ? bodyContent(hide) : bodyContent),
6516
6526
  footerContent && (React__namespace.createElement(PopoverFooter, { id: `popover-${uniqueId}-footer` }, typeof footerContent === 'function' ? footerContent(hide) : footerContent)))));
6517
- return (React__namespace.createElement(Popper, { trigger: children, reference: reference, popper: content, popperMatchesTriggerWidth: false, appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onTriggerClick: onTriggerClick, onTriggerEnter: onTriggerEnter, onDocumentClick: onDocumentClick, onDocumentKeyDown: onDocumentKeyDown, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior }));
6527
+ return (React__namespace.createElement(PopoverContext.Provider, { value: { headerComponent } },
6528
+ React__namespace.createElement(Popper, { trigger: children, reference: reference, popper: content, popperMatchesTriggerWidth: false, appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onTriggerClick: onTriggerClick, onTriggerEnter: onTriggerEnter, onDocumentClick: onDocumentClick, onDocumentKeyDown: onDocumentKeyDown, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior })));
6518
6529
  };
6519
6530
  Popover.displayName = 'Popover';
6520
6531
 
@@ -7061,7 +7072,7 @@
7061
7072
  function sortClicked(event) {
7062
7073
  let reversedDirection;
7063
7074
  if (!isSortedBy) {
7064
- reversedDirection = exports.SortByDirection.asc;
7075
+ reversedDirection = sortBy.defaultDirection ? sortBy.defaultDirection : exports.SortByDirection.asc;
7065
7076
  }
7066
7077
  else {
7067
7078
  reversedDirection = sortBy.direction === exports.SortByDirection.asc ? exports.SortByDirection.desc : exports.SortByDirection.asc;
@@ -5194,30 +5194,48 @@ label.pf-c-check, .pf-c-check__label,
5194
5194
  box-shadow: var(--pf-c-tooltip--BoxShadow);
5195
5195
  }
5196
5196
 
5197
- .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
5197
+ .pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
5198
5198
  bottom: 0;
5199
5199
  left: 50%;
5200
5200
  transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
5201
5201
  }
5202
5202
 
5203
- .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
5203
+ .pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
5204
5204
  top: 0;
5205
5205
  left: 50%;
5206
5206
  transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
5207
5207
  }
5208
5208
 
5209
- .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
5209
+ .pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
5210
5210
  top: 50%;
5211
5211
  right: 0;
5212
5212
  transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
5213
5213
  }
5214
5214
 
5215
- .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
5215
+ .pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
5216
5216
  top: 50%;
5217
5217
  left: 0;
5218
5218
  transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
5219
5219
  }
5220
5220
 
5221
+ .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
5222
+ top: var(--pf-c-tooltip__arrow--Height);
5223
+ }
5224
+
5225
+ .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
5226
+ top: auto;
5227
+ bottom: 0;
5228
+ }
5229
+
5230
+ .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
5231
+ left: var(--pf-c-tooltip__arrow--Width);
5232
+ }
5233
+
5234
+ .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
5235
+ right: 0;
5236
+ left: auto;
5237
+ }
5238
+
5221
5239
  .pf-c-tooltip__content {
5222
5240
  position: relative;
5223
5241
  padding: var(--pf-c-tooltip__content--PaddingTop) var(--pf-c-tooltip__content--PaddingRight) var(--pf-c-tooltip__content--PaddingBottom) var(--pf-c-tooltip__content--PaddingLeft);
@@ -15545,7 +15563,7 @@ ul.pf-c-list {
15545
15563
  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
15546
15564
  }
15547
15565
 
15548
- .pf-c-menu-toggle.pf-m-plain {
15566
+ .pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
15549
15567
  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
15550
15568
  --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
15551
15569
  --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -16330,14 +16348,12 @@ ul.pf-c-list {
16330
16348
  }
16331
16349
 
16332
16350
  .pf-c-nav__item {
16333
- --pf-c-nav__item__toggle-icon--Rotate: 0;
16334
16351
  position: relative;
16335
16352
  margin-top: var(--pf-c-nav__item--MarginTop);
16336
16353
  }
16337
16354
 
16338
16355
  .pf-c-nav__item.pf-m-expandable {
16339
16356
  --pf-c-nav__link--before--BorderBottomWidth: 0;
16340
- --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
16341
16357
  }
16342
16358
 
16343
16359
  .pf-c-nav__item.pf-m-expandable::before {
@@ -16349,6 +16365,10 @@ ul.pf-c-list {
16349
16365
  border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
16350
16366
  }
16351
16367
 
16368
+ .pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
16369
+ transform: rotate(0);
16370
+ }
16371
+
16352
16372
  .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
16353
16373
  --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
16354
16374
  --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
@@ -16636,11 +16656,7 @@ ul.pf-c-list {
16636
16656
  transition: var(--pf-c-nav__toggle-icon--Transition);
16637
16657
  }
16638
16658
 
16639
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
16640
- transform: rotate(0deg);
16641
- }
16642
-
16643
- .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
16659
+ .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
16644
16660
  transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
16645
16661
  }
16646
16662
 
@@ -17237,44 +17253,34 @@ ul.pf-c-list {
17237
17253
  justify-content: space-between;
17238
17254
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
17239
17255
  max-width: 100%;
17240
- padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
17256
+ padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
17241
17257
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
17242
17258
  color: var(--pf-c-options-menu__toggle--Color);
17243
17259
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
17244
17260
  border: none;
17245
17261
  }
17246
17262
 
17247
- .pf-c-options-menu__toggle:not(.pf-m-text) {
17248
- padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
17249
- padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
17250
- padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
17251
- }
17252
-
17253
17263
  .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
17254
17264
  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
17255
17265
  border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
17256
17266
  }
17257
17267
 
17258
- .pf-c-options-menu__toggle.pf-m-plain {
17268
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17259
17269
  --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
17260
17270
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
17261
17271
  display: inline-block;
17262
- }
17263
-
17264
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17265
- justify-content: center;
17266
17272
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
17267
17273
  }
17268
17274
 
17269
- .pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
17275
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
17270
17276
  line-height: var(--pf-c-options-menu__toggle--LineHeight);
17271
17277
  }
17272
17278
 
17273
- .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
17279
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
17274
17280
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
17275
17281
  }
17276
17282
 
17277
- .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
17283
+ .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
17278
17284
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
17279
17285
  }
17280
17286
 
@@ -24767,6 +24773,7 @@ label.pf-c-radio, .pf-c-radio__label,
24767
24773
  }
24768
24774
 
24769
24775
  .pf-c-text-input-group {
24776
+ --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
24770
24777
  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
24771
24778
  --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
24772
24779
  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -24791,14 +24798,27 @@ label.pf-c-radio, .pf-c-radio__label,
24791
24798
  --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
24792
24799
  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
24793
24800
  --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
24801
+ --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
24802
+ --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
24794
24803
  position: relative;
24795
24804
  display: flex;
24805
+ color: var(--pf-c-text-input-group--Color, inherit);
24806
+ background-color: var(--pf-c-text-input-group--BackgroundColor);
24796
24807
  }
24797
24808
 
24798
24809
  .pf-c-text-input-group:hover {
24799
24810
  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
24800
24811
  }
24801
24812
 
24813
+ .pf-c-text-input-group.pf-m-disabled {
24814
+ --pf-c-text-input-group__text--before--BorderWidth: 0;
24815
+ --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
24816
+ --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
24817
+ --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
24818
+ --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
24819
+ pointer-events: none;
24820
+ }
24821
+
24802
24822
  .pf-c-text-input-group__main {
24803
24823
  display: flex;
24804
24824
  flex: 1;