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

package/lib/cjs/TopContentSearch/TopContentSearch.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]; } });
@@ -38,70 +27,27 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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 __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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopContentSearch = exports.getTopContentUrl = void 0;
 require("./topContentSearch.scss");
-var react_core_1 = require("@patternfly/react-core");
-var utils_1 = require("@rh-support/utils");
-var js_worker_search_1 = __importStar(require("js-worker-search"));
-var debounce_1 = __importDefault(require("lodash/debounce"));
-var flatMap_1 = __importDefault(require("lodash/flatMap"));
-var isEmpty_1 = __importDefault(require("lodash/isEmpty"));
-var mark_js_1 = __importDefault(require("mark.js"));
-var react_1 = __importStar(require("react"));
-var react_i18next_1 = require("react-i18next");
-var getTopContentUrl = function (contentUrl) {
+const react_core_1 = require("@patternfly/react-core");
+const utils_1 = require("@rh-support/utils");
+const js_worker_search_1 = __importStar(require("js-worker-search"));
+const debounce_1 = __importDefault(require("lodash/debounce"));
+const flatMap_1 = __importDefault(require("lodash/flatMap"));
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
+const mark_js_1 = __importDefault(require("mark.js"));
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const getTopContentUrl = (contentUrl) => {
     // There is some data urls (e.g. /solutions/articles/etc.) that aren't valid urls
     // this adds the access.redhat.com to make them valid urls, otherwise the top content edit functionality won't work
     // for product/versions that already have data not created by users.
     if (contentUrl.startsWith('/')) {
-        return "https://" + utils_1.getAccessHostname() + contentUrl;
+        return `https://${utils_1.getAccessHostname()}${contentUrl}`;
     }
     return contentUrl;
 };
@@ -111,44 +57,42 @@ var CustomEvents;
     CustomEvents["inputChange"] = "top-content-filter-input-change";
     CustomEvents["inputClear"] = "top-content-filter-input-clear";
 })(CustomEvents || (CustomEvents = {}));
-function TopContentSearch(_a) {
-    var _this = this;
-    var _b = _a.topContentData, topContentData = _b === void 0 ? [] : _b, _c = _a.topContentResultsWrapperRef, topContentResultsWrapperRef = _c === void 0 ? { current: {} } : _c, onSearch = _a.onSearch, dataTrackingId = _a.dataTrackingId, _d = _a.enableEventTracking, enableEventTracking = _d === void 0 ? false : _d;
-    var _e = __read(react_1.useState(''), 2), searchText = _e[0], setSearchText = _e[1];
-    var t = react_i18next_1.useTranslation().t;
-    var searchWorkerRef = react_1.useRef(new js_worker_search_1.default({
+function TopContentSearch({ topContentData = [], topContentResultsWrapperRef = { current: {} }, onSearch, dataTrackingId, enableEventTracking = false, }) {
+    const [searchText, setSearchText] = react_1.useState('');
+    const { t } = react_i18next_1.useTranslation();
+    const searchWorkerRef = react_1.useRef(new js_worker_search_1.default({
         indexMode: js_worker_search_1.INDEX_MODES.ALL_SUBSTRINGS,
         caseSensitive: false,
         matchAnyToken: true,
     }));
-    var searchWrapperRef = react_1.useRef(null);
-    react_1.useEffect(function () {
-        topContentData.forEach(function (item) {
-            item.content.forEach(function (content) {
-                searchWorkerRef.current.indexDocument(content.topContentId, content.contentTitle + " " + exports.getTopContentUrl(content.contentUrl));
+    const searchWrapperRef = react_1.useRef(null);
+    react_1.useEffect(() => {
+        topContentData.forEach((item) => {
+            item.content.forEach((content) => {
+                searchWorkerRef.current.indexDocument(content.topContentId, `${content.contentTitle} ${exports.getTopContentUrl(content.contentUrl)}`);
             });
         });
         searchText && handleSearch(searchText);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [topContentData]);
     // to log custom events for dtm tracking.
-    var logCustomEvent = function (eventName, event) {
+    const logCustomEvent = (eventName, event) => {
         if (!enableEventTracking || !searchWrapperRef.current || !event || !eventName)
             return;
         utils_1.dtmTrackEvent(searchWrapperRef, eventName, event);
     };
-    var highlightSearchResults = react_1.useCallback(function (searchTerm) {
-        var d = topContentResultsWrapperRef.current;
-        var markInstance = new mark_js_1.default(d);
+    const highlightSearchResults = react_1.useCallback((searchTerm) => {
+        const d = topContentResultsWrapperRef.current;
+        const markInstance = new mark_js_1.default(d);
         markInstance.unmark({
-            done: function () {
+            done: () => {
                 if (isEmpty_1.default(searchTerm))
                     return;
                 markInstance.mark(searchTerm, { separateWordSearch: true });
             },
         });
     }, [topContentResultsWrapperRef]);
-    var onSearchInputClear = react_1.useCallback(function (event) {
+    const onSearchInputClear = react_1.useCallback((event) => {
         logCustomEvent(CustomEvents.inputClear, event);
         setSearchText('');
         highlightSearchResults('');
@@ -156,41 +100,32 @@ function TopContentSearch(_a) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [highlightSearchResults, topContentData]);
-    var handleSearch = react_1.useCallback(function (query) { return __awaiter(_this, void 0, void 0, function () {
-        var contentIds, contentFound, filteredData;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!query) {
-                        onSearchInputClear();
-                        return [2 /*return*/];
-                    }
-                    return [4 /*yield*/, searchWorkerRef.current.search(query)];
-                case 1:
-                    contentIds = _a.sent();
-                    contentFound = 0;
-                    filteredData = flatMap_1.default(topContentData, function (item) {
-                        var filteredContent = item.content.filter(function (item) { return contentIds.includes(item.topContentId); });
-                        var filteredContentLength = filteredContent.length;
-                        if (filteredContentLength > 0 && contentFound < contentIds.length) {
-                            contentFound = contentFound + filteredContentLength;
-                            return [__assign(__assign({}, item), { content: filteredContent })];
-                        }
-                        else {
-                            return [];
-                        }
-                    });
-                    onSearch(query, filteredData);
-                    highlightSearchResults(query);
-                    logCustomEvent(CustomEvents.inputChange, { bubbles: true, detail: { query: query } });
-                    return [2 /*return*/];
+    const handleSearch = react_1.useCallback((query) => __awaiter(this, void 0, void 0, function* () {
+        if (!query) {
+            onSearchInputClear();
+            return;
+        }
+        const contentIds = yield searchWorkerRef.current.search(query);
+        let contentFound = 0;
+        const filteredData = flatMap_1.default(topContentData, (item) => {
+            const filteredContent = item.content.filter((item) => contentIds.includes(item.topContentId));
+            const filteredContentLength = filteredContent.length;
+            if (filteredContentLength > 0 && contentFound < contentIds.length) {
+                contentFound = contentFound + filteredContentLength;
+                return [Object.assign(Object.assign({}, item), { content: filteredContent })];
+            }
+            else {
+                return [];
             }
         });
-    }); }, 
+        onSearch(query, filteredData);
+        highlightSearchResults(query);
+        logCustomEvent(CustomEvents.inputChange, { bubbles: true, detail: { query } });
+    }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [highlightSearchResults, topContentData, onSearchInputClear]);
-    var debounceSearch = react_1.useMemo(function () { return debounce_1.default(handleSearch, 500); }, [handleSearch]);
-    var onSearchInputChange = function (value) {
+    const debounceSearch = react_1.useMemo(() => debounce_1.default(handleSearch, 500), [handleSearch]);
+    const onSearchInputChange = (value) => {
         setSearchText(value);
         debounceSearch(value);
     };

package/lib/cjs/ValueChangedIcon/ValueChangedIcon.js

@@ -18,63 +18,47 @@ 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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ValueChangedIcon = void 0;
-var react_core_1 = require("@patternfly/react-core");
-var lightbulb_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/lightbulb-icon"));
-var debounce_1 = __importDefault(require("lodash/debounce"));
-var react_1 = __importStar(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const lightbulb_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/lightbulb-icon"));
+const debounce_1 = __importDefault(require("lodash/debounce"));
+const react_1 = __importStar(require("react"));
 function ValueChangedIcon(props) {
     // removed 2 min refresh functionality so this icon never needs to be shown
     // TODO: Reimplement "setShow"
-    var _a = __read(react_1.useState(false), 1), show = _a[0];
-    var _b = __read(react_1.useState(), 2), tooltipContent = _b[0], setTooltipContent = _b[1];
-    var _c = __read(react_1.useState(props.value), 2), currentValue = _c[0], setCurrentValue = _c[1];
-    var _d = __read(react_1.useState(), 2), previousValue = _d[0], setPreviousValue = _d[1];
-    var _e = __read(react_1.useState(), 2), clearTTDebounce = _e[0], setClearTTDebounce = _e[1];
+    const [show] = react_1.useState(false);
+    const [tooltipContent, setTooltipContent] = react_1.useState();
+    const [currentValue, setCurrentValue] = react_1.useState(props.value);
+    const [previousValue, setPreviousValue] = react_1.useState();
+    const [clearTTDebounce, setClearTTDebounce] = react_1.useState();
     if (clearTTDebounce) {
         clearTTDebounce();
         setClearTTDebounce(undefined);
     }
-    react_1.useEffect(function () {
+    react_1.useEffect(() => {
         if (props.isLocalChange) {
             props.afterLocalChange();
             setPreviousValue(currentValue);
             return;
         }
-        var showTT = props.comparator
+        const showTT = props.comparator
             ? props.comparator(currentValue, previousValue)
             : previousValue !== currentValue;
         if (!!previousValue && !props.isLocalChange && showTT) {
             // setShow(true);
             setTooltipContent(props.getTooltipContent(currentValue, previousValue));
             setPreviousValue(currentValue);
-            setClearTTDebounce(debounce_1.default(function () {
+            setClearTTDebounce(debounce_1.default(() => {
                 setTooltipContent(null);
                 // setShow(false);
             }, 6000));
         }
     }, [props, previousValue, currentValue]);
-    react_1.useEffect(function () {
+    react_1.useEffect(() => {
         if (currentValue !== props.value) {
             setPreviousValue(!!currentValue ? currentValue : props.value);
             setCurrentValue(props.value);

package/lib/cjs/helperFunctions/errorMessage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './errorMessage.scss';
 export interface IAppErrorObj {
     title: string;

package/lib/cjs/helperFunctions/errorMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errorMessage.d.ts","sourceRoot":"","sources":["../../../src/helperFunctions/errorMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAS7B,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,SAAS;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;CACxC;AAoDD,iBAAS,wBAAwB,CAAC,KAAK,KAAA,EAAE,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,CAwCxF;AAED,iBAAS,iBAAiB,CAAC,KAAK,KAAA,EAAE,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,CAIjE;AAED,OAAO,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"errorMessage.d.ts","sourceRoot":"","sources":["../../../src/helperFunctions/errorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAS7B,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CACjC;AAED,MAAM,WAAW,SAAS;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;CACxC;AAoDD,iBAAS,wBAAwB,CAAC,KAAK,KAAA,EAAE,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,CAwCxF;AAED,iBAAS,iBAAiB,CAAC,KAAK,KAAA,EAAE,WAAW,CAAC,EAAE,SAAS,GAAG,MAAM,CAIjE;AAED,OAAO,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,CAAC"}

package/lib/cjs/helperFunctions/errorMessage.js

@@ -5,21 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.errorMessageTitle = exports.formattedApiErrorMessage = void 0;
 require("./errorMessage.scss");
-var react_core_1 = require("@patternfly/react-core");
-var external_link_alt_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/external-link-alt-icon"));
-var isEmpty_1 = __importDefault(require("lodash/isEmpty"));
-var react_1 = __importDefault(require("react"));
-var SupportFeedbackForm_1 = require("../SupportFeedbackForm");
-var defaultTitle = "Sorry, we're experiencing an error";
-var errorMessageButtonLabel = 'contact us';
-var defaultErrorMessage = (react_1.default.createElement("p", { className: "pf-u-mb-0" },
+const react_core_1 = require("@patternfly/react-core");
+const external_link_alt_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/external-link-alt-icon"));
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
+const react_1 = __importDefault(require("react"));
+const SupportFeedbackForm_1 = require("../SupportFeedbackForm");
+const defaultTitle = "Sorry, we're experiencing an error";
+const errorMessageButtonLabel = 'contact us';
+const defaultErrorMessage = (react_1.default.createElement("p", { className: "pf-u-mb-0" },
     "Try refreshing the page. Please ",
     react_1.default.createElement(SupportFeedbackForm_1.SupportFeedbackForm, { isInline: true, buttonLabel: errorMessageButtonLabel }),
     " if the problem persists.",
     react_1.default.createElement("br", null),
     react_1.default.createElement(react_core_1.Button, { variant: "link", component: "a", href: "https://status.redhat.com/", "data-tracking-id": "redirect-status-portal-button", target: "_blank", icon: react_1.default.createElement(external_link_alt_icon_1.default, { className: "status-portal-button-icon" }), iconPosition: "right", className: "pf-u-pl-0", isInline: true, "aria-label": "View status page" }, "View status page"),
     ' '));
-var defaultErrorObj = {
+const defaultErrorObj = {
     500: {
         title: defaultTitle,
         message: defaultErrorMessage,
@@ -44,7 +44,7 @@ var defaultErrorObj = {
 // the error argument need a better typing here. We want to make sure that user is passing an error object and not an error string
 function formattedApiErrorMessage(error, customMessage) {
     var _a, _b, _c;
-    var errorCode = parseInt((error === null || error === void 0 ? void 0 : error.code) || (error === null || error === void 0 ? void 0 : error.status)) || '';
+    const errorCode = parseInt((error === null || error === void 0 ? void 0 : error.code) || (error === null || error === void 0 ? void 0 : error.status)) || '';
     if (!customMessage)
         customMessage = {};
     // Note: We show default error message on 503 error codes
@@ -78,9 +78,9 @@ function formattedApiErrorMessage(error, customMessage) {
     }
     else {
         // api call error
-        var message = (error === null || error === void 0 ? void 0 : error.statusText) || (error === null || error === void 0 ? void 0 : error.responseText) || '';
+        const message = (error === null || error === void 0 ? void 0 : error.statusText) || (error === null || error === void 0 ? void 0 : error.responseText) || '';
         // error.message -> javascript error
-        var isNotProperUXError = isEmpty_1.default(message) || (message === null || message === void 0 ? void 0 : message.length) > 200 || (error === null || error === void 0 ? void 0 : error.message) || (error === null || error === void 0 ? void 0 : error.detailMessage);
+        const isNotProperUXError = isEmpty_1.default(message) || (message === null || message === void 0 ? void 0 : message.length) > 200 || (error === null || error === void 0 ? void 0 : error.message) || (error === null || error === void 0 ? void 0 : error.detailMessage);
         return isNotProperUXError ? defaultErrorMessage : message;
     }
 }
@@ -89,7 +89,7 @@ function errorMessageTitle(error, customError) {
     var _a, _b;
     if (!customError)
         customError = {};
-    var errorCode = parseInt((error === null || error === void 0 ? void 0 : error.code) || (error === null || error === void 0 ? void 0 : error.status)) || '';
+    const errorCode = parseInt((error === null || error === void 0 ? void 0 : error.code) || (error === null || error === void 0 ? void 0 : error.status)) || '';
     return ((_a = customError[errorCode]) === null || _a === void 0 ? void 0 : _a.title) || ((_b = defaultErrorObj[errorCode]) === null || _b === void 0 ? void 0 : _b.title) || defaultTitle;
 }
 exports.errorMessageTitle = errorMessageTitle;

package/lib/cjs/hooks/useBreakpoint.js

@@ -18,71 +18,54 @@ 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.BreakpointProvider = exports.useBreakpoint = void 0;
-var react_1 = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 // https://medium.com/better-programming/how-to-use-media-queries-programmatically-in-react-4d6562c3bc97
-var defaultValue = {};
-var BreakpointContext = react_1.default.createContext(defaultValue);
-var defaultQueries = {
-    xs: "(min-width: 0px)",
-    sm: "(min-width: 576px)",
-    md: "(min-width: 768px)",
-    lg: "(min-width: 992px)",
-    xl: "(min-width: 1300px)",
+const defaultValue = {};
+const BreakpointContext = react_1.default.createContext(defaultValue);
+const defaultQueries = {
+    xs: `(min-width: 0px)`,
+    sm: `(min-width: 576px)`,
+    md: `(min-width: 768px)`,
+    lg: `(min-width: 992px)`,
+    xl: `(min-width: 1300px)`,
 };
-function BreakpointProvider(_a) {
-    var children = _a.children, _b = _a.queries, queries = _b === void 0 ? defaultQueries : _b;
-    var _c = __read(react_1.useState({}), 2), queryMatch = _c[0], setQueryMatch = _c[1];
-    react_1.useEffect(function () {
-        var mediaQueryLists = {};
-        var keys = Object.keys(queries);
-        var isAttached = false;
-        var handleQueryListener = function () {
-            var updatedMatches = keys.reduce(function (acc, media) {
+function BreakpointProvider({ children, queries = defaultQueries }) {
+    const [queryMatch, setQueryMatch] = react_1.useState({});
+    react_1.useEffect(() => {
+        const mediaQueryLists = {};
+        const keys = Object.keys(queries);
+        let isAttached = false;
+        const handleQueryListener = () => {
+            const updatedMatches = keys.reduce((acc, media) => {
                 acc[media] = !!(mediaQueryLists[media] && mediaQueryLists[media].matches);
                 return acc;
             }, {});
             setQueryMatch(updatedMatches);
         };
         if (window && window.matchMedia) {
-            var matches_1 = {};
-            keys.forEach(function (media) {
+            const matches = {};
+            keys.forEach((media) => {
                 if (typeof queries[media] === 'string') {
                     mediaQueryLists[media] = window.matchMedia(queries[media]);
-                    matches_1[media] = mediaQueryLists[media].matches;
+                    matches[media] = mediaQueryLists[media].matches;
                 }
                 else {
-                    matches_1[media] = false;
+                    matches[media] = false;
                 }
             });
-            setQueryMatch(matches_1);
+            setQueryMatch(matches);
             isAttached = true;
-            keys.forEach(function (media) {
+            keys.forEach((media) => {
                 if (typeof queries[media] === 'string') {
                     mediaQueryLists[media].addListener(handleQueryListener);
                 }
             });
         }
-        return function () {
+        return () => {
             if (isAttached) {
-                keys.forEach(function (media) {
+                keys.forEach((media) => {
                     if (typeof queries[media] === 'string') {
                         mediaQueryLists[media].removeListener(handleQueryListener);
                     }
@@ -94,7 +77,7 @@ function BreakpointProvider(_a) {
 }
 exports.BreakpointProvider = BreakpointProvider;
 function useBreakpoint() {
-    var context = react_1.useContext(BreakpointContext);
+    const context = react_1.useContext(BreakpointContext);
     if (context === defaultValue) {
         throw new Error('useBreakpoint must be used within a BreakpointProvider');
     }

package/lib/cjs/hooks/useCopyToClipboard.js

@@ -1,25 +1,9 @@
 "use strict";
-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.useCopyToClipboard = exports.selectText = void 0;
-var react_1 = require("react");
-var react_i18next_1 = require("react-i18next");
-var selectText = function (elem) {
+const react_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const selectText = (elem) => {
     var range = document.createRange();
     range.selectNode(elem);
     window.getSelection().removeAllRanges();
@@ -27,9 +11,9 @@ var selectText = function (elem) {
 };
 exports.selectText = selectText;
 function useCopyToClipboard(ref) {
-    var _a = __read(react_1.useState(''), 2), clipboardText = _a[0], setClipboardText = _a[1];
-    var t = react_i18next_1.useTranslation().t;
-    var copyToClipboard = function () {
+    const [clipboardText, setClipboardText] = react_1.useState('');
+    const { t } = react_i18next_1.useTranslation();
+    const copyToClipboard = () => {
         exports.selectText(ref.current);
         try {
             document.execCommand('copy');
@@ -48,8 +32,8 @@ function useCopyToClipboard(ref) {
         }
     };
     return {
-        clipboardText: clipboardText,
-        copyToClipboard: copyToClipboard,
+        clipboardText,
+        copyToClipboard,
     };
 }
 exports.useCopyToClipboard = useCopyToClipboard;

package/lib/cjs/hooks/useDebounce.js

@@ -1,65 +1,40 @@
 "use strict";
-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;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDeepCompareDebounce = exports.useDebounce = void 0;
-var debounce_1 = __importDefault(require("lodash/debounce"));
-var react_1 = require("react");
-var use_deep_compare_effect_1 = __importDefault(require("use-deep-compare-effect"));
+const debounce_1 = __importDefault(require("lodash/debounce"));
+const react_1 = require("react");
+const use_deep_compare_effect_1 = __importDefault(require("use-deep-compare-effect"));
 // Takes a callback that is called after a debounce delay based on the dependencies array
 // Its just a wrapper over useEffect and debounce function which cancels previous callback each time
-function useDebounce(callback, dependencies, wait, options) {
-    if (wait === void 0) { wait = 0; }
-    if (options === void 0) { options = {}; }
-    react_1.useEffect(function () {
-        var handler = debounce_1.default(function () {
+function useDebounce(callback, dependencies, wait = 0, options = {}) {
+    react_1.useEffect(() => {
+        const handler = debounce_1.default(() => {
             callback();
         }, wait, options);
         handler();
         // Clears the previous callback
-        return function () {
+        return () => {
             handler.cancel();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([wait], __read(dependencies)));
+    }, [wait, ...dependencies]);
 }
 exports.useDebounce = useDebounce;
-function useDeepCompareDebounce(callback, dependencies, wait, options) {
-    if (wait === void 0) { wait = 0; }
-    if (options === void 0) { options = {}; }
-    use_deep_compare_effect_1.default(function () {
+function useDeepCompareDebounce(callback, dependencies, wait = 0, options = {}) {
+    use_deep_compare_effect_1.default(() => {
         //instead of useeffect use the deepcompare libary
-        var handler = debounce_1.default(function () {
+        const handler = debounce_1.default(() => {
             callback();
         }, wait, options);
         handler();
         // Clears the previous callback
-        return function () {
+        return () => {
             handler.cancel();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([wait], __read(dependencies)));
+    }, [wait, ...dependencies]);
 }
 exports.useDeepCompareDebounce = useDeepCompareDebounce;