@rh-support/components 2.0.4 → 2.0.7-beta.1

package/lib/cjs/AlertMessage/AlertMessage.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertMessage = exports.AlertType = void 0;
 require("./AlertMessage.css");
-var react_core_1 = require("@patternfly/react-core");
-var react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = __importDefault(require("react"));
 var AlertType;
 (function (AlertType) {
     AlertType["DANGER"] = "danger";
@@ -14,7 +14,7 @@ var AlertType;
     AlertType["INFO"] = "info";
     AlertType["SUCCESS"] = "success";
 })(AlertType = exports.AlertType || (exports.AlertType = {}));
-var defaultProps = {
+const defaultProps = {
     className: '',
     show: false,
 };
@@ -23,8 +23,8 @@ function AlertMessage(props) {
         return null;
     }
     // If there is no title then the children node becomes the title to have a better styling
-    var alertMsg = props.title || props.children;
-    return (react_1.default.createElement(react_core_1.Alert, { label: props.title, className: props.className, variant: props.variant, title: alertMsg, isInline: props.isInline, actionClose: !!props.onClose ? react_1.default.createElement(react_core_1.AlertActionCloseButton, { onClose: props.onClose }) : null }, props.title ? props.children : react_1.default.createElement(react_1.default.Fragment, null)));
+    const alertMsgTitle = props.title || props.children;
+    return (react_1.default.createElement(react_core_1.Alert, { label: props.title, className: props.className, variant: props.variant, title: alertMsgTitle, isInline: props.isInline, actionClose: !!props.onClose ? react_1.default.createElement(react_core_1.AlertActionCloseButton, { onClose: props.onClose }) : null }, props.title ? props.children : react_1.default.createElement(react_1.default.Fragment, null)));
 }
 exports.AlertMessage = AlertMessage;
 AlertMessage.defaultProps = defaultProps;

package/lib/cjs/AlertMessage/index.d.ts

@@ -1,3 +1,2 @@
 export * from './AlertMessage';
-export * from './AlertMessage.stories';
 //# sourceMappingURL=index.d.ts.map

package/lib/cjs/AlertMessage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AlertMessage/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/AlertMessage/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/lib/cjs/AlertMessage/index.js

@@ -11,4 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./AlertMessage"), exports);
-__exportStar(require("./AlertMessage.stories"), exports);
+//export * from './AlertMessage.stories';

package/lib/cjs/ConfirmationModal/ConfirmationContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ConfirmationOptions } from './ConfirmationDialog';
 export declare const useConfirmation: () => (options: ConfirmationOptions) => Promise<void>;
 export declare const ConfirmationServiceProvider: ({ children }: {

package/lib/cjs/ConfirmationModal/ConfirmationContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationContext.d.ts","sourceRoot":"","sources":["../../../src/ConfirmationModal/ConfirmationContext.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAsB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAI/E,eAAO,MAAM,eAAe,kBAFqC,mBAAmB,KAAK,QAAQ,IAAI,CAE1B,CAAC;AAE5E,eAAO,MAAM,2BAA2B;;iBA2CvC,CAAC"}
+{"version":3,"file":"ConfirmationContext.d.ts","sourceRoot":"","sources":["../../../src/ConfirmationModal/ConfirmationContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAI/E,eAAO,MAAM,eAAe,kBAFqC,mBAAmB,KAAK,QAAQ,IAAI,CAE1B,CAAC;AAE5E,eAAO,MAAM,2BAA2B;;iBA2CvC,CAAC"}

package/lib/cjs/ConfirmationModal/ConfirmationContext.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,46 +18,29 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmationServiceProvider = exports.useConfirmation = void 0;
-var react_1 = __importStar(require("react"));
-var ConfirmationDialog_1 = require("./ConfirmationDialog");
-var ConfirmationServiceContext = react_1.default.createContext(Promise.reject);
-var useConfirmation = function () { return react_1.useContext(ConfirmationServiceContext); };
+const react_1 = __importStar(require("react"));
+const ConfirmationDialog_1 = require("./ConfirmationDialog");
+const ConfirmationServiceContext = react_1.default.createContext(Promise.reject);
+const useConfirmation = () => react_1.useContext(ConfirmationServiceContext);
 exports.useConfirmation = useConfirmation;
-var ConfirmationServiceProvider = function (_a) {
-    var children = _a.children;
-    var _b = __read(react_1.useState(null), 2), confirmationState = _b[0], setConfirmationState = _b[1];
-    var awaitingPromiseRef = react_1.useRef();
-    var openConfirmation = function (options) {
+const ConfirmationServiceProvider = ({ children }) => {
+    const [confirmationState, setConfirmationState] = react_1.useState(null);
+    const awaitingPromiseRef = react_1.useRef();
+    const openConfirmation = (options) => {
         setConfirmationState(options);
-        return new Promise(function (resolve, reject) {
-            awaitingPromiseRef.current = { resolve: resolve, reject: reject };
+        return new Promise((resolve, reject) => {
+            awaitingPromiseRef.current = { resolve, reject };
         });
     };
-    var handleClose = function () {
+    const handleClose = () => {
         if (confirmationState.catchOnCancel && awaitingPromiseRef.current) {
             awaitingPromiseRef.current.reject();
         }
         setConfirmationState(null);
     };
-    var handleConfirm = function () {
+    const handleConfirm = () => {
         if (awaitingPromiseRef.current) {
             awaitingPromiseRef.current.resolve();
         }
@@ -76,6 +48,6 @@ var ConfirmationServiceProvider = function (_a) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(ConfirmationServiceContext.Provider, { value: openConfirmation, children: children }),
-        react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, __assign({ open: Boolean(confirmationState), onConfirm: handleConfirm, onClose: handleClose }, confirmationState))));
+        react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, Object.assign({ open: Boolean(confirmationState), onConfirm: handleConfirm, onClose: handleClose }, confirmationState))));
 };
 exports.ConfirmationServiceProvider = ConfirmationServiceProvider;

package/lib/cjs/ConfirmationModal/ConfirmationDialog.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { ButtonVariant } from '@patternfly/react-core';
+import { ButtonVariant, ModalVariant } from '@patternfly/react-core';
 export interface ConfirmationOptions {
     catchOnCancel?: boolean;
     title?: string;
@@ -8,11 +7,13 @@ export interface ConfirmationOptions {
     confirmButtonVariant?: ButtonVariant;
     cancelText?: string;
     cancelButtonVariant?: ButtonVariant;
+    modalVariant?: ModalVariant;
 }
 interface IProps extends ConfirmationOptions {
     open: boolean;
     onConfirm: () => void;
     onClose: () => void;
+    modalVariant?: ModalVariant;
 }
 declare function ConfirmationDialog(props: IProps): JSX.Element;
 declare namespace ConfirmationDialog {
@@ -21,6 +22,7 @@ declare namespace ConfirmationDialog {
         cancelText: string;
         confirmButtonVariant: ButtonVariant;
         cancelButtonVariant: ButtonVariant;
+        modalVariant: ModalVariant;
     };
 }
 export { ConfirmationDialog };

package/lib/cjs/ConfirmationModal/ConfirmationDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/ConfirmationModal/ConfirmationDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAU,aAAa,EAAS,MAAM,wBAAwB,CAAC;AAItE,MAAM,WAAW,mBAAmB;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,aAAa,CAAC;CACvC;AAED,UAAU,MAAO,SAAQ,mBAAmB;IACxC,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AASD,iBAAS,kBAAkB,CAAC,KAAK,EAAE,MAAM,eAsBxC;kBAtBQ,kBAAkB;;;;;;;;AAwB3B,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/ConfirmationModal/ConfirmationDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,aAAa,EAAS,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAIpF,MAAM,WAAW,mBAAmB;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,aAAa,CAAC;IACpC,YAAY,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,UAAU,MAAO,SAAQ,mBAAmB;IACxC,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC/B;AAUD,iBAAS,kBAAkB,CAAC,KAAK,EAAE,MAAM,eAsBxC;kBAtBQ,kBAAkB;;;;;;;;;AAwB3B,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/lib/cjs/ConfirmationModal/ConfirmationDialog.js

@@ -4,18 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmationDialog = void 0;
-var react_core_1 = require("@patternfly/react-core");
-var react_1 = __importDefault(require("react"));
-var react_i18next_1 = require("react-i18next");
-var defaultProps = {
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = __importDefault(require("react"));
+const react_i18next_1 = require("react-i18next");
+const defaultProps = {
     confirmText: 'Confirm',
     cancelText: 'Cancel',
     confirmButtonVariant: react_core_1.ButtonVariant.primary,
     cancelButtonVariant: react_core_1.ButtonVariant.link,
+    modalVariant: react_core_1.ModalVariant.medium,
 };
 function ConfirmationDialog(props) {
-    var t = react_i18next_1.useTranslation().t;
-    return (react_1.default.createElement(react_core_1.Modal, { width: '50%', "aria-describedby": "se-confirm-dialog", "aria-label": t('confirmation modal'), title: props.title || null, isOpen: props.open, onClose: props.onClose, actions: [
+    const { t } = react_i18next_1.useTranslation();
+    return (react_1.default.createElement(react_core_1.Modal, { variant: props.modalVariant, "aria-describedby": "se-confirm-dialog", "aria-label": t('confirmation modal'), title: props.title || '', isOpen: props.open, onClose: props.onClose, actions: [
             react_1.default.createElement(react_core_1.Button, { key: "confirm", onClick: props.onConfirm, variant: props.confirmButtonVariant },
                 react_1.default.createElement(react_i18next_1.Trans, null, props.confirmText)),
             react_1.default.createElement(react_core_1.Button, { key: "cancel", onClick: props.onClose, variant: props.cancelButtonVariant },

package/lib/cjs/ConfirmationModal/ConfirmationModal.stories.d.ts

@@ -1,7 +1 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const ConfirmDialog: () => JSX.Element;
 //# sourceMappingURL=ConfirmationModal.stories.d.ts.map

package/lib/cjs/ConfirmationModal/ConfirmationModal.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmationModal.stories.d.ts","sourceRoot":"","sources":["../../../src/ConfirmationModal/ConfirmationModal.stories.tsx"],"names":[],"mappings":";;;;AAIA,wBAEE;AAwBF,eAAO,MAAM,aAAa,mBAIzB,CAAC"}
+{"version":3,"file":"ConfirmationModal.stories.d.ts","sourceRoot":"","sources":["../../../src/ConfirmationModal/ConfirmationModal.stories.tsx"],"names":[],"mappings":""}

package/lib/cjs/ConfirmationModal/ConfirmationModal.stories.js

@@ -1,76 +1,36 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfirmDialog = void 0;
-var react_1 = __importDefault(require("react"));
-var ConfirmationContext_1 = require("./ConfirmationContext");
-exports.default = {
+/*import React from 'react';
+
+import { ConfirmationServiceProvider, useConfirmation } from './ConfirmationContext';
+
+export default {
     title: 'Components/ConfirmationModal',
 };
-var options = {
+
+const options = {
     catchOnCancel: true,
     title: 'Title',
     description: 'Decroption',
 };
-var ActionPage = function () {
-    var confirm = ConfirmationContext_1.useConfirmation();
-    var action = function () { return function () { return __awaiter(void 0, void 0, void 0, function () {
-        var e_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, confirm(options)];
-                case 1:
-                    _a.sent();
-                    return [3 /*break*/, 3];
-                case 2:
-                    e_1 = _a.sent();
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }; };
-    return react_1.default.createElement("button", { onClick: action() }, "action link");
+
+const ActionPage = () => {
+    const confirm = useConfirmation();
+
+    const action = () => async () => {
+        try {
+            await confirm(options);
+            // confirmed, continue
+            // rest of code
+        } catch (e) {
+            // didn't confirm
+        }
+    };
+
+    return <button onClick={action()}>action link</button>;
 };
-var ConfirmDialog = function () { return (react_1.default.createElement(ConfirmationContext_1.ConfirmationServiceProvider, null,
-    react_1.default.createElement(ActionPage, null))); };
-exports.ConfirmDialog = ConfirmDialog;
+
+export const ConfirmDialog = () => (
+    <ConfirmationServiceProvider>
+        <ActionPage />
+    </ConfirmationServiceProvider>
+);
+*/

package/lib/cjs/CoverSpinner/CoverSpinner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './CoverSpinner.css';
 export declare function CoverSpinner(): JSX.Element;
 //# sourceMappingURL=CoverSpinner.d.ts.map

package/lib/cjs/CoverSpinner/CoverSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoverSpinner.d.ts","sourceRoot":"","sources":["../../../src/CoverSpinner/CoverSpinner.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAC;AAI5B,wBAAgB,YAAY,gBAM3B"}
+{"version":3,"file":"CoverSpinner.d.ts","sourceRoot":"","sources":["../../../src/CoverSpinner/CoverSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAI5B,wBAAgB,YAAY,gBAM3B"}

package/lib/cjs/CoverSpinner/CoverSpinner.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoverSpinner = void 0;
 require("./CoverSpinner.css");
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 function CoverSpinner() {
     return (react_1.default.createElement("div", { className: "cover-spin", role: "alert" },
         react_1.default.createElement("div", { className: "spinner" })));

package/lib/cjs/CustomContentLoader/CustomContentLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomContentLoader.d.ts","sourceRoot":"","sources":["../../../src/CustomContentLoader/CustomContentLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,qBAAqB,gBAgEpC;AAED,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb;AAED,UAAU,2BAA2B;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,UAAU,CAAC,EAAE,uBAAuB,EAAE,CAAC;CAC1C;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,2BAA2B,eAMrE"}
+{"version":3,"file":"CustomContentLoader.d.ts","sourceRoot":"","sources":["../../../src/CustomContentLoader/CustomContentLoader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,qBAAqB,gBAgEpC;AAED,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb;AAED,UAAU,2BAA2B;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,UAAU,CAAC,EAAE,uBAAuB,EAAE,CAAC;CAC1C;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,2BAA2B,eAUrE"}

package/lib/cjs/CustomContentLoader/CustomContentLoader.js

@@ -4,26 +4,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomContentLoader = exports.OverviewContentLoader = void 0;
-var react_1 = __importDefault(require("react"));
-var react_content_loader_1 = __importDefault(require("react-content-loader"));
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = __importDefault(require("react"));
 function OverviewContentLoader() {
     return (react_1.default.createElement("div", { style: { width: '100%', position: 'relative' } },
-        react_1.default.createElement(react_content_loader_1.default, { height: '900', width: '70%' },
-            react_1.default.createElement("rect", { x: "2.3%", y: "50", width: "15%", height: "30" }),
-            react_1.default.createElement("rect", { x: "2.3%", y: "95", width: "12%", height: "25" }),
-            react_1.default.createElement("rect", { x: "2.3%", y: "140", width: "50%", height: "25" }),
-            react_1.default.createElement("rect", { x: "2.3%", y: "190", width: "100%", height: "150" }),
-            react_1.default.createElement("rect", { x: "2.3%", y: "370", width: "100%", height: "120" }),
-            react_1.default.createElement("rect", { x: "2.3%", y: "520", width: "100%", height: "50" }),
-            react_1.default.createElement("rect", { x: "3%", y: "590", width: "10%", height: "25" }),
-            react_1.default.createElement("rect", { x: "3%", y: "635", width: "43%", height: "25" }),
-            react_1.default.createElement("rect", { x: "55%", y: "590", width: "10%", height: "25" }),
-            react_1.default.createElement("rect", { x: "55%", y: "635", width: "43%", height: "25" }),
-            react_1.default.createElement("rect", { x: "3%", y: "695", width: "10%", height: "25" }),
-            react_1.default.createElement("rect", { x: "3%", y: "740", width: "95%", height: "25" }),
-            react_1.default.createElement("rect", { x: "2.3%", y: "570", width: "1", height: "220" }),
-            react_1.default.createElement("rect", { x: "99.9%", y: "570", width: "1", height: "220" }),
-            react_1.default.createElement("rect", { x: "2.3%", y: "790", width: "100%", height: "1" })),
+        react_1.default.createElement("div", { style: { width: '70%', height: '900px', position: 'relative' } },
+            react_1.default.createElement(react_core_1.Skeleton, { height: "30px", width: "15%", style: { top: '50px', left: '2.3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "25px", width: "12%", style: { top: '95px', left: '2.3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "25px", width: "50%", style: { top: '140px', left: '2.3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "150px", width: "97.7%", style: { top: '190px', left: '2.3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "120px", width: "97.7%", style: { top: '370px', left: '2.3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "50px", width: "97.7%", style: { top: '520px', left: '2.3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "25px", width: "10%", style: { top: '590px', left: '3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "25px", width: "43%", style: { top: '635px', left: '3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "25px", width: "10%", style: { top: '590px', left: '55%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "25px", width: "43%", style: { top: '635px', left: '55%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "25px", width: "10%", style: { top: '695px', left: '3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "25px", width: "95%", style: { top: '740px', left: '3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "220px", width: "1px", style: { top: '570px', left: '2.3%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "220px", width: "1px", style: { top: '570px', left: '99.9%' } }),
+            react_1.default.createElement(react_core_1.Skeleton, { height: "1px", width: "97.7%", style: { top: '790px', left: '2.3%' } })),
         react_1.default.createElement("div", { style: {
                 position: 'absolute',
                 top: '0',
@@ -48,15 +48,15 @@ function OverviewContentLoader() {
                 bottom: '0',
                 backgroundColor: '#ededed',
             } },
-            react_1.default.createElement(react_content_loader_1.default, { height: '100%', width: '100%', backgroundColor: '#fff', foregroundColor: '#f5f6f7' },
-                react_1.default.createElement("rect", { x: "3%", y: "40", height: "500", width: "94%" }),
-                react_1.default.createElement("rect", { x: "3%", y: "570", height: "500", width: "94%" })))));
+            react_1.default.createElement("div", { className: "gray-loader-background", style: { height: '100%', width: '100%' } },
+                react_1.default.createElement(react_core_1.Skeleton, { height: "500px", width: "94%", style: { top: '40px', left: '3%' } }),
+                react_1.default.createElement(react_core_1.Skeleton, { height: "500px", width: "94%", style: { top: '570px', left: '3%' } })))));
 }
 exports.OverviewContentLoader = OverviewContentLoader;
 function CustomContentLoader(props) {
-    var children = (props.rectangles &&
-        props.rectangles.map(function (obj) { return react_1.default.createElement("rect", { x: obj.x, y: obj.y, height: obj.height, width: obj.width }); })) ||
-        props.children || react_1.default.createElement("rect", { x: 0, y: 0, width: 400, height: 100 });
-    return react_1.default.createElement(react_content_loader_1.default, null, children);
+    const children = (props.rectangles &&
+        props.rectangles.map((obj) => (react_1.default.createElement(react_core_1.Skeleton, { height: obj.height, width: obj.width, style: { top: obj.y, left: obj.x } })))) ||
+        props.children || (react_1.default.createElement(react_core_1.Skeleton, { height: "100px", width: "400px", style: { position: 'relative', marginBottom: '50px' } }));
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
 }
 exports.CustomContentLoader = CustomContentLoader;

package/lib/cjs/CustomTextInput/CustomTextInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextInputProps } from '@patternfly/react-core';
 interface IProps extends TextInputProps {
     className?: string;

package/lib/cjs/CustomTextInput/CustomTextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomTextInput.d.ts","sourceRoot":"","sources":["../../../src/CustomTextInput/CustomTextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,cAAc,EAAoB,MAAM,wBAAwB,CAAC;AAIrF,UAAU,MAAO,SAAQ,cAAc;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,UAAW,MAAM,gBAqD5C,CAAC"}
+{"version":3,"file":"CustomTextInput.d.ts","sourceRoot":"","sources":["../../../src/CustomTextInput/CustomTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAoB,MAAM,wBAAwB,CAAC;AAIrF,UAAU,MAAO,SAAQ,cAAc;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,UAAW,MAAM,gBAqD5C,CAAC"}

package/lib/cjs/CustomTextInput/CustomTextInput.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -26,21 +15,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomTextInput = void 0;
-var react_core_1 = require("@patternfly/react-core");
-var lodash_1 = require("lodash");
-var react_1 = __importDefault(require("react"));
-var CustomTextInput = function (props) {
+const react_core_1 = require("@patternfly/react-core");
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
+const react_1 = __importDefault(require("react"));
+const CustomTextInput = (props) => {
     // To set defaultProps
-    var onChange = props.onChange, _a = props.isSpaceAllowed, isSpaceAllowed = _a === void 0 ? false : _a, isRequired = props.isRequired, className = props.className, type = props.type, maxLength = props.maxLength, value = props.value, isDisabled = props.isDisabled, placeholder = props.placeholder, validated = props.validated, name = props.name, rest = __rest(props, ["onChange", "isSpaceAllowed", "isRequired", "className", "type", "maxLength", "value", "isDisabled", "placeholder", "validated", "name"]);
+    const { onChange, isSpaceAllowed = false, isRequired, className, type, maxLength, value, isDisabled, placeholder, validated, name } = props, rest = __rest(props, ["onChange", "isSpaceAllowed", "isRequired", "className", "type", "maxLength", "value", "isDisabled", "placeholder", "validated", "name"]);
     // To handle on input change
-    var onTextInputChange = function (value, event) {
+    const onTextInputChange = (value, event) => {
         onChange(value, event);
         event.preventDefault();
         return [];
     };
     // Function to check for validity
-    var validatedCheck = function () {
-        if (!lodash_1.isEmpty(value)) {
+    const validatedCheck = () => {
+        if (!isEmpty_1.default(value)) {
             if (validated === 'error') {
                 return 'error';
             }
@@ -48,12 +37,12 @@ var CustomTextInput = function (props) {
                 return validated;
             }
             else if (!isSpaceAllowed) {
-                return lodash_1.isEmpty(value === null || value === void 0 ? void 0 : value.trim()) ? 'error' : 'default';
+                return isEmpty_1.default(value === null || value === void 0 ? void 0 : value.trim()) ? 'error' : 'default';
             }
             else
                 return validated;
         }
     };
-    return (react_1.default.createElement(react_core_1.TextInput, __assign({}, rest, { isRequired: isRequired, className: className, type: type, maxLength: maxLength, value: value, isDisabled: isDisabled, "aria-label": props['aria-label'], placeholder: placeholder, onChange: onTextInputChange, validated: validatedCheck(), name: name })));
+    return (react_1.default.createElement(react_core_1.TextInput, Object.assign({}, rest, { isRequired: isRequired, className: className, type: type, maxLength: maxLength, value: value, isDisabled: isDisabled, "aria-label": props['aria-label'], placeholder: placeholder, onChange: onTextInputChange, validated: validatedCheck(), name: name })));
 };
 exports.CustomTextInput = CustomTextInput;

package/lib/cjs/DropDownList/AsyncDropDownList.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AsyncMultiDropDownList = exports.AsyncDropDownList = void 0;
-var async_1 = require("./async");
-var DropDownList_1 = require("./DropDownList");
-var MultiSelectDropdownList_1 = require("./MultiSelectDropdownList");
-var AsyncDropDownList = async_1.withAsync(DropDownList_1.Dropdown);
+const async_1 = require("./async");
+const DropDownList_1 = require("./DropDownList");
+const MultiSelectDropdownList_1 = require("./MultiSelectDropdownList");
+const AsyncDropDownList = async_1.withAsync(DropDownList_1.Dropdown);
 exports.AsyncDropDownList = AsyncDropDownList;
-var AsyncMultiDropDownList = async_1.withAsync(MultiSelectDropdownList_1.MultiSelectDropDownList);
+const AsyncMultiDropDownList = async_1.withAsync(MultiSelectDropdownList_1.MultiSelectDropDownList);
 exports.AsyncMultiDropDownList = AsyncMultiDropDownList;

package/lib/cjs/DropDownList/DropDownList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './dropdownList.css';
 import { IDropdownListProps } from './types';
 declare function Dropdown<T>(props: IDropdownListProps<T>): JSX.Element;

package/lib/cjs/DropDownList/DropDownList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/DropDownList.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAC;AAa5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAuB7C,iBAAS,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,eAoJhD;kBApJQ,QAAQ;;;AAsJjB,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"DropDownList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/DropDownList.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAa5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAuB7C,iBAAS,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,eAoJhD;kBApJQ,QAAQ;;;AAsJjB,OAAO,EAAE,QAAQ,EAAE,CAAC"}