@redhat-cloud-services/frontend-components 3.9.1 → 3.9.4

package/BulkSelect/BulkSelect.d.ts

@@ -11,7 +11,7 @@ export interface BulkSelectProps {
     count?: number;
     className?: string;
     items?: BulkSelectItem[];
-    checked?: boolean;
+    checked?: boolean | null;
     id?: string;
     onSelect?: DropdownToggleCheckboxProps['onChange'];
     toggleProps?: DropdownToggleProps;

package/BulkSelect/bulk-select.scss

@@ -1,19 +1,19 @@
 .ins-c-bulk-select {
-    .pf-c-dropdown__toggle-check span.pf-c-dropdown__toggle-text {
-        display: initial;
-    }
-    .ins-c-bulk-select__selected {
-        display: none;
-    }
+  .pf-c-dropdown__toggle-check span.pf-c-dropdown__toggle-text {
+    display: initial;
+  }
+  .ins-c-bulk-select__selected {
+    display: none;
+  }
 }
 
 @media only screen and (max-width: 768px) {
-    .ins-c-bulk-select {
-        .pf-c-dropdown__toggle-check span.pf-c-dropdown__toggle-text {
-            display: none;
-        }
-        .ins-c-bulk-select__selected {
-            display: initial;
-        }
+  .ins-c-bulk-select {
+    .pf-c-dropdown__toggle-check span.pf-c-dropdown__toggle-text {
+      display: none;
+    }
+    .ins-c-bulk-select__selected {
+      display: initial;
     }
+  }
 }

package/ConditionalFilter/ConditionalFilter.d.ts

@@ -23,11 +23,11 @@ export interface ConditionalFilterItem {
     placeholder?: string;
 }
 export interface ConditionalFilterProps extends TextInputProps {
-    hideLabel: boolean;
+    hideLabel?: boolean;
     items: ConditionalFilterItem[];
-    id: string;
-    isDisabled: boolean;
-    useMobileLayout: boolean;
+    id?: string;
+    isDisabled?: boolean;
+    useMobileLayout?: boolean;
 }
 declare const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps>;
 export default ConditionalFilter;

package/ConditionalFilter/conditional-filter.css

@@ -11,7 +11,7 @@
   max-width: 9.375rem;
 }
 .ins-c-conditional-filter .ins-c-conditional-filter__group .pf-c-dropdown__toggle-text {
-  width: 102px;
+  width: auto;
   text-align: left;
 }
 .ins-c-conditional-filter .ins-c-conditional-filter__group .pf-c-dropdown__toggle-text > svg {

package/ConditionalFilter/conditional-filter.scss

@@ -1,110 +1,101 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
 
 .ins-c-conditional-filter {
-    &.mobile {
-        display: none !important;
-        visibility: hidden !important;
-    }
-    .pf-c-select__toggle-wrapper .pf-c-select__toggle-text {
-        @include rem('max-width', 150px);
-    }
-
-    .ins-c-conditional-filter__group {
-        .pf-c-dropdown__toggle-text {
-            width: 102px;
-            text-align: left;
-
-            & > svg {
-                margin-right: var(--pf-global--spacer--xs);
-            }
-        }
-
-        .ins-c-conditional-filter__no-label .pf-c-dropdown__toggle-text  {
-            width: auto;
+  &.mobile {
+    display: none !important;
+    visibility: hidden !important;
+  }
+  .pf-c-select__toggle-wrapper .pf-c-select__toggle-text {
+    @include rem('max-width', 150px);
+  }
+  .ins-c-conditional-filter__group {
+    .pf-c-dropdown__toggle-text {
+      width: auto;
+      text-align: left;
+        & > svg {
+          margin-right: var(--pf-global--spacer--xs);
         }
+      }
+    .ins-c-conditional-filter__no-label .pf-c-dropdown__toggle-text  {
+      width: auto;
     }
+  }
 
-    .pf-l-split__item {
-        .pf-c-select__menu-group {
-            .pf-c-select__menu-group-title:empty {
-                display: none;
-            }
-
-            padding: 0;
-        }
-        
-        .pf-c-select__option-button {
-            padding: 0;
-        }
-
-        .pf-c-select__menu-item-icon {
-            display: none;
-        }
-    }
-
-    input.ins-c-conditional-filter[type="text"] {
-        @include rem('padding-right', 35px);
-        @include rem('margin-right', -23px);
-
-        & + svg {
-            position: relative;
-            @include rem('left', -5px);
-            @include rem('top', 2px);
-        }
+  .pf-l-split__item {
+    .pf-c-select__menu-group {
+      .pf-c-select__menu-group-title:empty {
+        display: none;
+      }
+      padding: 0;
     }
-
-    .pf-c-select__toggle-text {
-        margin-right: 0;
+    .pf-c-select__option-button {
+      padding: 0;
     }
-    .pf-c-select__toggle-badge {
-        display: none;
+    .pf-c-select__menu-item-icon {
+      display: none;
     }
+  }
+  input.ins-c-conditional-filter[type="text"] {
+    @include rem('padding-right', 35px);
+    @include rem('margin-right', -23px);
 
-    .pf-c-menu-toggle {
-        .pf-c-menu-toggle__text {
-            flex: 1;
-            input { border: none; }
-        }
+    & + svg {
+      position: relative;
+      @include rem('left', -5px);
+      @include rem('top', 2px);
+    }
+  }
+  .pf-c-select__toggle-text {
+    margin-right: 0;
+  }
+  .pf-c-select__toggle-badge {
+    display: none;
+  }
+  .pf-c-menu-toggle {
+    .pf-c-menu-toggle__text {
+      flex: 1;
+      input { border: none; }
     }
+  }
 }
 
 .pf-c-menu {
-    &.ins-c-menu__scrollable {
-        max-height: 416px;
-        overflow-y: auto;
-        min-width: initial;
-    }
-    .ins-c-menu__show--more {
-        background: none;
-        .pf-c-menu__item-text{ color: var(--pf-global--active-color--100); }
-    }
+  &.ins-c-menu__scrollable {
+    max-height: 416px;
+    overflow-y: auto;
+    min-width: initial;
+  }
+  .ins-c-menu__show--more {
+    background: none;
+    .pf-c-menu__item-text{ color: var(--pf-global--active-color--100); }
+  }
 }
 
 @media only screen and (max-width: 768px) {
-    .ins-c-conditional-filter {
-        &.mobile {
-            visibility: visible !important;
-            display: grid !important;
-        }
-        &.desktop {
-            visibility: hidden;
-            display: none;
-        }
+  .ins-c-conditional-filter {
+    &.mobile {
+      visibility: visible !important;
+      display: grid !important;
+    }
+    &.desktop {
+      visibility: hidden;
+      display: none;
     }
+  }
 }
 
 @media only screen and (max-width: 884px) {
-    .ins-c-conditional-filter {
-        .ins-c-conditional-filter__group {
-            .pf-c-dropdown__toggle-text {
-                width: auto;
-            }
-            .ins-c-conditional-filter__value-selector {
-                display: none;
-            }
-            .ins-c-conditional-filter__group {
-                width: initial;
-            }
-        }
+  .ins-c-conditional-filter {
+    .ins-c-conditional-filter__group {
+      .pf-c-dropdown__toggle-text {
+        width: auto;
+      }
+      .ins-c-conditional-filter__value-selector {
+        display: none;
+      }
+      .ins-c-conditional-filter__group {
+        width: initial;
+      }
     }
+  }
 }

package/CullingInfo/CullingInformation.scss

@@ -3,8 +3,8 @@
 .ins-c-inventory__culling-danger { color: var(--pf-global--danger-color--100); }
 
 .ins-c-inventory__culling-danger, .ins-c-inventory__culling-warning {
-    font-weight: var(--pf-global--FontWeight--bold);
-    svg {
-        margin-right: var(--pf-global--spacer--sm);
-    }
+  font-weight: var(--pf-global--FontWeight--bold);
+  svg {
+    margin-right: var(--pf-global--spacer--sm);
+  }
 }

package/DownloadButton/DownloadButton.d.ts

@@ -1,7 +1,7 @@
 import { DropdownProps } from '@patternfly/react-core';
 import React from 'react';
-export interface DownloadButtonProps extends Omit<DropdownProps, 'onSelect'> {
-    extraItems?: any[];
+export interface DownloadButtonProps extends Omit<DropdownProps, 'onSelect' | 'toggle' | 'dropdownItems'> {
+    extraItems?: React.ReactElement[];
     tooltipText?: React.ReactNode;
     onSelect?: (event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>, format: 'csv' | 'json') => void;
     isDisabled?: boolean;

package/DownloadButton/DownloadButton.js

@@ -61,7 +61,7 @@ var DownloadButton = function (_a) {
     var conditionallyTooltip = function (children) {
         return react_1.default.createElement(react_1.default.Fragment, null, tooltipText ? react_1.default.createElement(react_core_1.Tooltip, { content: tooltipText }, children) : children);
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null, conditionallyTooltip(react_1.default.createElement(react_core_1.Dropdown, __assign({}, props, { isPlain: true, onSelect: internalOnSelect, toggle: react_1.default.createElement(react_core_1.DropdownToggle, { "aria-label": "Export", toggleIndicator: null, onToggle: onToggle, isDisabled: isDisabled, ouiaId: "Export" },
+    return (react_1.default.createElement(react_1.default.Fragment, null, conditionallyTooltip(react_1.default.createElement(react_core_1.Dropdown, __assign({ isPlain: true }, props, { onSelect: internalOnSelect, toggle: react_1.default.createElement(react_core_1.DropdownToggle, { "aria-label": "Export", toggleIndicator: null, onToggle: onToggle, isDisabled: isDisabled, ouiaId: "Export" },
             react_1.default.createElement(react_icons_1.ExportIcon, { size: "sm" })), isOpen: isOpen, ouiaId: "Export", dropdownItems: __spreadArray([
             react_1.default.createElement(react_core_1.DropdownItem, { key: "download-csv", ouiaId: "DownloadCSV", component: "button", onClick: function (event) { return onSelect(event, 'csv'); }, isDisabled: isDisabled }, "Export to CSV"),
             react_1.default.createElement(react_core_1.DropdownItem, { key: "download-json", ouiaId: "DownloadJSON", component: "button", onClick: function (event) { return onSelect(event, 'json'); }, isDisabled: isDisabled }, "Export to JSON")

package/DownloadButton/DownloadButton.spec.ct.d.ts

@@ -0,0 +1 @@
+export {};

package/DownloadButton/DownloadButton.spec.ct.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@cypress/react");
+var __1 = require("..");
+describe('DownloadButton component', function () {
+    beforeEach(function () {
+        (0, react_2.mount)(react_1.default.createElement(__1.DownloadButton, null));
+    });
+    it('renders the dropdown', function () {
+        cy.get('.pf-c-dropdown');
+    });
+    it('on download callback fired', function () {
+        var onSelectSpy = cy.spy().as('onSelectSpy');
+        (0, react_2.mount)(react_1.default.createElement(__1.DownloadButton, { onSelect: onSelectSpy }));
+        cy.get('div[data-ouia-component-id="Export"] > button').click();
+        cy.get('div[data-ouia-component-id="Export"] > ul > li > button[data-ouia-component-id="DownloadCSV"]').click();
+        cy.get('@onSelectSpy').should('have.been.called.with', 'csv');
+    });
+});
+//# sourceMappingURL=DownloadButton.spec.ct.js.map

package/EmptyTable/EmptyTable.scss

@@ -1,11 +1,11 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
 
 .ins-c-table__empty {
-    background: var(--pf-global--Color--light-100);
-    border-bottom: 1px solid var(--pf-global--BorderColor--light-200);
-    @include rem('padding', 20px);
-    &.is-centered {
-        display: flex;
-        justify-content: center;
-    }
+  background: var(--pf-global--Color--light-100);
+  border-bottom: 1px solid var(--pf-global--BorderColor--light-200);
+  @include rem('padding', 20px);
+  &.is-centered {
+    display: flex;
+    justify-content: center;
+  }
 }

package/ErrorState/error-state.scss

@@ -1,5 +1,5 @@
 .ins-c-error-state.pf-c-empty-state {
-    .pf-c-empty-state__icon {
-        fill: var(--pf-global--danger-color--100);
-    }
+  .pf-c-empty-state__icon {
+    fill: var(--pf-global--danger-color--100);
+  }
 }

package/FilterChips/filter-chips.scss

@@ -1,15 +1,14 @@
 .ins-c-chip-filters .ins-c-chip-group__plain.pf-m-toolbar > li:not(.pf-m-overflow) {
-    background: none;
-    padding: 0;
-    background-color: initial;
-
-    h4 {
-        display: none;
-    }
+  background: none;
+  padding: 0;
+  background-color: initial;
+  h4 {
+    display: none;
+  }
 }
 
 .ins-c-chip-filters {
-    .pf-c-chip-group:not(:last-child) {
-        margin-right: var(--pf-global--spacer--sm);
-    }
+  .pf-c-chip-group:not(:last-child) {
+    margin-right: var(--pf-global--spacer--sm);
+  }
 }

package/FilterHooks/tagFilterHook.scss

@@ -1,21 +1,20 @@
 .ins-c-tagfilter {
-    .ins-c-tagfilter__option label {
-        display: flex;
-        width: 100%;
-
-        .ins-c-tagfilter__option-value {
-            max-width: 12.5rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .pf-c-badge {
-            margin-left: auto;
-            padding-top: 0.2;
-        }
+  .ins-c-tagfilter__option label {
+    display: flex;
+    width: 100%;
+    .ins-c-tagfilter__option-value {
+      max-width: 12.5rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .pf-c-badge {
+      margin-left: auto;
+      padding-top: 0.2;
     }
-    .pf-c-select__menu-group-title:empty { display: none; }
+  }
+  .pf-c-select__menu-group-title:empty { display: none; }
 
-    .pf-c-select__menu > div { padding-top: 0; }
+  .pf-c-select__menu > div { padding-top: 0; }
 
-    &.pf-m-expanded { width: 18.75rem !important; }
+  &.pf-m-expanded { width: 18.75rem !important; }
 }

package/InsightsLabel/labels.scss

@@ -1,19 +1,21 @@
 .pf-c-label {
-    --ins-c-label--gold-bg:             #fdf7e7;
-    --inc-c-label--content-gold:        var(--pf-global--palette--gold-700);
-    --inc-c-label--icon-gold:           #F4C145;
-    --inc-c-label--border-gold:         var(--pf-global--palette--gold-100)
+  --ins-c-label--gold-bg: #fdf7e7;
+  --inc-c-label--content-gold: var(--pf-global--palette--gold-700);
+  --inc-c-label--icon-gold: #F4C145;
+  --inc-c-label--border-gold: var(--pf-global--palette--gold-100)
 }
 
 .ins-c-label-2.pf-c-label {
-    background-color: var(--ins-c-label--gold-bg);
-    .pf-c-label__content {
-        color: var(--inc-c-label--content-gold);
-        .pf-c-label__icon {
-            color: var(--inc-c-label--icon-gold);
-        }
+  background-color: var(--ins-c-label--gold-bg);
+  .pf-c-label__content {
+    color: var(--inc-c-label--content-gold);
+    .pf-c-label__icon {
+      color: var(--inc-c-label--icon-gold);
     }
+  }
 }
-.ins-c-label-2.pf-c-label {.pf-c-label__content::before {
+.ins-c-label-2.pf-c-label {
+  .pf-c-label__content::before {
     border: 1px solid var(--inc-c-label--border-gold);
-        }}
+  }
+}

package/InvalidObject/icon-404.scss

@@ -1,11 +1,7 @@
 .Icon404 {
-    height: 150px;
-
-    .cls-1 { fill:#fff; }
-
-    .cls-1,.cls-3{ fill-rule:evenodd;}
-    
-    .cls-2{ opacity:0.5;}
-    
-    .cls-4{ mask:url(#mask); }
+  height: 150px;
+  .cls-1 { fill:#fff; }
+  .cls-1,.cls-3{ fill-rule:evenodd;} 
+  .cls-2{ opacity:0.5;}
+  .cls-4{ mask:url(#mask); }
 }

package/LongTextTooltip/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './LongTextTooltip';
-export { default as LongTextTooltip } from './LongTextTooltip.js';
+export { default as LongTextTooltip } from './LongTextTooltip';
 export * from './LongTextTooltip';

package/LongTextTooltip/index.js

@@ -16,7 +16,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LongTextTooltip = exports.default = void 0;
 var LongTextTooltip_1 = require("./LongTextTooltip");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(LongTextTooltip_1).default; } });
-var LongTextTooltip_js_1 = require("./LongTextTooltip.js");
-Object.defineProperty(exports, "LongTextTooltip", { enumerable: true, get: function () { return __importDefault(LongTextTooltip_js_1).default; } });
+var LongTextTooltip_2 = require("./LongTextTooltip");
+Object.defineProperty(exports, "LongTextTooltip", { enumerable: true, get: function () { return __importDefault(LongTextTooltip_2).default; } });
 __exportStar(require("./LongTextTooltip"), exports);
 //# sourceMappingURL=index.js.map

package/Main/main.scss

@@ -1,3 +1,3 @@
 .pf-l-page__main .pf-l-page__main-section.pf-m-dark:not(:first-child) {
-    background: var(--pf-global--BackgroundColor--dark-transparent-100);
+  background: var(--pf-global--BackgroundColor--dark-transparent-100);
 }

package/Maintenance/maintenance.scss

@@ -1,7 +1,7 @@
 .ins-c-empty-state__maintenance {
-    .pf-c-empty-state__body {
-        color: var(--pf-global--Color--100);
-    }
-    .pf-c-empty-state__icon { fill: #EE0000; } // This is Red Hat's red, not Patternfly's red.
-    .pf-c-title { font-weight: 500; }
+  .pf-c-empty-state__body {
+    color: var(--pf-global--Color--100);
+  }
+  .pf-c-empty-state__icon { fill: #EE0000; } // This is Red Hat's red, not Patternfly's red.
+  .pf-c-title { font-weight: 500; }
 }

package/NotAuthorized/NotAuthorized.scss

@@ -1,7 +1,7 @@
 .ins-c-not-authorized {
-    .pf-c-title {
-        max-width: 540px;
-        margin-left: auto;
-        margin-right: auto;
-    }
+  .pf-c-title {
+    max-width: 540px;
+    margin-left: auto;
+    margin-right: auto;
+  }
 }

package/PageHeader/page-header.scss

@@ -1,12 +1,12 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/_all.scss';
 
 .pf-l-page__main-section.pf-l-page-header.pf-m-dark-200 {
-    h1.pf-c-title.pf-m-2xl, * { color: #fff; }
+  h1.pf-c-title.pf-m-2xl, * { color: #fff; }
 }
 
 .pf-l-page__main-section.pf-l-page-header {
-    .pf-c-breadcrumb {
-        display: block;
-        @include rem('margin-bottom', 15px);
-    }
+  .pf-c-breadcrumb {
+    display: block;
+    @include rem('margin-bottom', 15px);
+  }
 }

package/Pagination/pagination.scss

@@ -3,13 +3,12 @@
 @import '~@patternfly/patternfly/components/OptionsMenu/options-menu.scss';
 
 .ins-c-pagination-next .pf-c-options-menu {
-    .pf-c-dropdown__menu .pf-c-dropdown__menu-item {
-        display: flex;
-
-        .pf-c-options-menu__menu-item-icon {
-            padding-left: 0;
-        }
+  .pf-c-dropdown__menu .pf-c-dropdown__menu-item {
+    display: flex;
+    .pf-c-options-menu__menu-item-icon {
+      padding-left: 0;
     }
+  }
 }
 
 .pf-c-pagination .pf-c-pagination__nav .pf-c-pagination__nav-page-select input { width: 75px; } 

package/PrimaryToolbar/PrimaryToolbar.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { PaginationProps, ButtonProps } from '@patternfly/react-core';
 import { ActionsProps } from './Actions';
 import { BulkSelectProps } from '../BulkSelect';
+import { ConditionalFilterProps } from '../ConditionalFilter';
 import { DownloadButtonProps } from '../DownloadButton';
 import { FilterChipsProps } from '../FilterChips';
 import { SortByProps } from './SortBy';
@@ -15,9 +16,9 @@ export declare type PrimaryToolbarExpandAllObject = {
 export interface PrimaryToolbarProps {
     id?: string | number;
     className?: string;
-    toggleIsExpanded?: () => 'bla';
+    toggleIsExpanded?: () => void;
     bulkSelect?: BulkSelectProps;
-    filterConfig?: any;
+    filterConfig?: ConditionalFilterProps;
     dedicatedAction?: React.ReactNode;
     pagination?: Omit<PaginationProps, 'ref'>;
     sortByConfig?: SortByProps;

package/PrimaryToolbar/PrimaryToolbar.js

@@ -48,7 +48,7 @@ function isPrimaryToolbarExpandAllObject(node) {
     return !react_1.default.isValidElement(node);
 }
 var PrimaryToolbar = function (_a) {
-    var id = _a.id, className = _a.className, toggleIsExpanded = _a.toggleIsExpanded, bulkSelect = _a.bulkSelect, filterConfig = _a.filterConfig, dedicatedAction = _a.dedicatedAction, actionsConfig = _a.actionsConfig, sortByConfig = _a.sortByConfig, pagination = _a.pagination, activeFiltersConfig = _a.activeFiltersConfig, children = _a.children, exportConfig = _a.exportConfig, expandAll = _a.expandAll, useMobileLayout = _a.useMobileLayout, props = __rest(_a, ["id", "className", "toggleIsExpanded", "bulkSelect", "filterConfig", "dedicatedAction", "actionsConfig", "sortByConfig", "pagination", "activeFiltersConfig", "children", "exportConfig", "expandAll", "useMobileLayout"]);
+    var id = _a.id, className = _a.className, _b = _a.toggleIsExpanded, toggleIsExpanded = _b === void 0 ? function () { return undefined; } : _b, bulkSelect = _a.bulkSelect, filterConfig = _a.filterConfig, dedicatedAction = _a.dedicatedAction, actionsConfig = _a.actionsConfig, sortByConfig = _a.sortByConfig, pagination = _a.pagination, activeFiltersConfig = _a.activeFiltersConfig, children = _a.children, exportConfig = _a.exportConfig, expandAll = _a.expandAll, useMobileLayout = _a.useMobileLayout, props = __rest(_a, ["id", "className", "toggleIsExpanded", "bulkSelect", "filterConfig", "dedicatedAction", "actionsConfig", "sortByConfig", "pagination", "activeFiltersConfig", "children", "exportConfig", "expandAll", "useMobileLayout"]);
     var overflowActions = __spreadArray([], (sortByConfig
         ? [
             {