oolib 2.135.1 → 2.136.1

package/dist/components/Banners/bannerContext.d.ts

@@ -1,6 +1,69 @@
-export const BannerContext: React.Context<any>;
-export function BannerProvider({ children }: {
-    children: any;
-}): React.JSX.Element;
-export function useBannerContext(): any;
-import React from "react";
+import React, { ReactNode, FunctionComponent } from "react";
+export interface BannerEntry {
+    id: string;
+    msg: string;
+    color?: string;
+    timeOut?: number;
+}
+export interface BannerState {
+    alertState: BannerEntry[];
+    infoState: BannerEntry[];
+}
+export type BannerAction = {
+    type: "ADD_ALERT";
+    payload: Omit<BannerEntry, "id">;
+} | {
+    type: "ADD_INFO";
+    payload: Omit<BannerEntry, "id">;
+} | {
+    type: "REMOVE_ALERT";
+    id: string;
+} | {
+    type: "REMOVE_INFO";
+    id: string;
+} | {
+    type: "REMOVE_ALL_INFO";
+} | {
+    type: "REMOVE_ALL_ALERT";
+};
+export interface BannerContextType {
+    BANNER_STATE: BannerState;
+    SET_INFO_BANNER: (options_msg: string | Omit<BannerEntry, "id">, color?: string, timeOut?: number) => string;
+    SET_ALERT_BANNER: (options_msg: string | Omit<BannerEntry, "id">, color?: string, timeOut?: number) => string;
+    REMOVE_ALERT_BANNER: (e: React.MouseEvent, id: string) => void;
+    REMOVE_INFO_BANNER: (e: React.MouseEvent, id: string) => void;
+    REMOVE_ALL_INFO_BANNERS: (e: React.MouseEvent) => void;
+    REMOVE_ALL_ALERT_BANNERS: (e: React.MouseEvent) => void;
+}
+export declare const BannerContext: React.Context<BannerContextType>;
+export interface BannerProviderProps {
+    children: ReactNode;
+}
+/**
+ * @component Renders a context provider component for the banner component.
+ *
+ * - The context value object containing the following properties:
+ * @property {BannerState} BANNER_STATE: The state of the banner.
+ * @property {(options_msg: string | Omit<BannerEntry, "id">, color?: string, timeOut?: number) => string} SET_INFO_BANNER: A callback function to be called when adding an info banner. The function takes the text to be displayed in the banner, the color of the banner, and the time in milliseconds to wait before removing the banner as arguments.
+ * @property {(options_msg: string | Omit<BannerEntry, "id">, color?: string, timeOut?: number) => string} SET_ALERT_BANNER: A callback function to be called when adding an alert banner. The function takes the text to be displayed in the banner, the color of the banner, and the time in milliseconds to wait before removing the banner as arguments.
+ * @property {(e: React.MouseEvent | null, id: string) => void} REMOVE_ALERT_BANNER: A callback function to be called when removing an alert banner. The function takes the mouse event and the id of the banner as arguments.
+ * @property {(e: React.MouseEvent | null, id: string) => void} REMOVE_INFO_BANNER: A callback function to be called when removing an info banner. The function takes the mouse event and the id of the banner as arguments.
+ * @property {(e: React.MouseEvent) => void} REMOVE_ALL_INFO_BANNERS: A callback function to be called when removing all info banners. The function takes the mouse event as an argument.
+ * @property {(e: React.MouseEvent) => void} REMOVE_ALL_ALERT_BANNERS: A callback function to be called when removing all alert banners. The function takes the mouse event as an argument.
+ * @return {ReactElement} The rendered context provider component.
+ */
+export declare const BannerProvider: FunctionComponent<BannerProviderProps>;
+/**
+ * @hook useBannerContext
+ *
+ * - The props object containing the following properties:
+ * @property {BannerState} BANNER_STATE: The state of the banner.
+ * @property {(options_msg: string | Omit<BannerEntry, "id">, color?: string, timeOut?: number) => string} SET_INFO_BANNER: A callback function to be called when adding an info banner. The function takes the text to be displayed in the banner, the color of the banner, and the time in milliseconds to wait before removing the banner as arguments.
+ * @property {(options_msg: string | Omit<BannerEntry, "id">, color?: string, timeOut?: number) => string} SET_ALERT_BANNER: A callback function to be called when adding an alert banner. The function takes the text to be displayed in the banner, the color of the banner, and the time in milliseconds to wait before removing the banner as arguments.
+ * @property {(e: React.MouseEvent | null, id: string) => void} REMOVE_ALERT_BANNER: A callback function to be called when removing an alert banner. The function takes the mouse event and the id of the banner as arguments.
+ * @property {(e: React.MouseEvent | null, id: string) => void} REMOVE_INFO_BANNER: A callback function to be called when removing an info banner. The function takes the mouse event and the id of the banner as arguments.
+ * @property {(e: React.MouseEvent) => void} REMOVE_ALL_INFO_BANNERS: A callback function to be called when removing all info banners. The function takes the mouse event as an argument.
+ * @property {(e: React.MouseEvent) => void} REMOVE_ALL_ALERT_BANNERS: A callback function to be called when removing all alert banners. The function takes the mouse event as an argument.
+ * @return {BannerContextType} The context value.
+ */
+export declare const useBannerContext: () => BannerContextType;

package/dist/components/Banners/bannerContext.js

@@ -45,7 +45,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBannerContext = exports.BannerProvider = exports.BannerContext = void 0;
 var react_1 = __importStar(require("react"));
-exports.BannerContext = (0, react_1.createContext)();
+exports.BannerContext = (0, react_1.createContext)(undefined);
 var counter = 0;
 // FEEDBACK:
 // needs to be outside the BannerProvider, else it gets called twice.
@@ -59,7 +59,7 @@ var bannerReducer = function (state, action) {
             var alertState = state.alertState;
             counter = counter + 1;
             newEntry = __assign({ id: "ALERT-".concat(counter) }, action.payload
-            // if an id is passed in the payload itelf, it will override the counter based id
+            // if an id is passed in the payload itelf, it will override the counter based id 
             );
             // if a alert banner exists with the same id, as the new one coming in,
             // we remove that first.
@@ -72,9 +72,7 @@ var bannerReducer = function (state, action) {
             else {
                 newAlertState = __spreadArray([newEntry], alertState, true);
             }
-            return __assign(__assign({}, state), { alertState: __spreadArray([
-                    newEntry
-                ], alertState, true) });
+            return __assign(__assign({}, state), { alertState: newAlertState });
         case "ADD_INFO":
             var infoState = state.infoState;
             counter = counter + 1;
@@ -99,15 +97,26 @@ var bannerReducer = function (state, action) {
             newInfoState = state.infoState.filter(function (a) { return a.id !== action.id; });
             return __assign(__assign({}, state), { infoState: newInfoState });
         case "REMOVE_ALL_INFO":
-            newInfoState = [];
-            return __assign(__assign({}, state), { infoState: newInfoState });
+            return __assign(__assign({}, state), { infoState: [] });
         case "REMOVE_ALL_ALERT":
-            newAlertState = [];
-            return __assign(__assign({}, state), { alertState: newAlertState });
+            return __assign(__assign({}, state), { alertState: [] });
         default:
             return state;
     }
 };
+/**
+ * @component Renders a context provider component for the banner component.
+ *
+ * - The context value object containing the following properties:
+ * @property {BannerState} BANNER_STATE: The state of the banner.
+ * @property {(options_msg: string | Omit<BannerEntry, "id">, color?: string, timeOut?: number) => string} SET_INFO_BANNER: A callback function to be called when adding an info banner. The function takes the text to be displayed in the banner, the color of the banner, and the time in milliseconds to wait before removing the banner as arguments.
+ * @property {(options_msg: string | Omit<BannerEntry, "id">, color?: string, timeOut?: number) => string} SET_ALERT_BANNER: A callback function to be called when adding an alert banner. The function takes the text to be displayed in the banner, the color of the banner, and the time in milliseconds to wait before removing the banner as arguments.
+ * @property {(e: React.MouseEvent | null, id: string) => void} REMOVE_ALERT_BANNER: A callback function to be called when removing an alert banner. The function takes the mouse event and the id of the banner as arguments.
+ * @property {(e: React.MouseEvent | null, id: string) => void} REMOVE_INFO_BANNER: A callback function to be called when removing an info banner. The function takes the mouse event and the id of the banner as arguments.
+ * @property {(e: React.MouseEvent) => void} REMOVE_ALL_INFO_BANNERS: A callback function to be called when removing all info banners. The function takes the mouse event as an argument.
+ * @property {(e: React.MouseEvent) => void} REMOVE_ALL_ALERT_BANNERS: A callback function to be called when removing all alert banners. The function takes the mouse event as an argument.
+ * @return {ReactElement} The rendered context provider component.
+ */
 var BannerProvider = function (_a) {
     var children = _a.children;
     var initialState = { alertState: [], infoState: [] };
@@ -118,19 +127,21 @@ var BannerProvider = function (_a) {
     var REMOVE_INFO_BANNER = function (e, id) {
         BANNER_DISPATCH({ type: "REMOVE_INFO", id: id });
     };
-    var REMOVE_ALL_INFO_BANNERS = function (e, id) {
-        BANNER_DISPATCH({ type: "REMOVE_ALL_INFO", id: id });
+    var REMOVE_ALL_INFO_BANNERS = function (e) {
+        BANNER_DISPATCH({ type: "REMOVE_ALL_INFO" });
     };
-    var REMOVE_ALL_ALERT_BANNERS = function (e, id) {
-        BANNER_DISPATCH({ type: "REMOVE_ALL_ALERT", id: id });
+    var REMOVE_ALL_ALERT_BANNERS = function (e) {
+        BANNER_DISPATCH({ type: "REMOVE_ALL_ALERT" });
     };
     // the config of bannner can either be passed as a object, or plain arguments.
     var SET_INFO_BANNER = function (options_msg, color, timeOut) {
-        var options = {};
+        var options;
         if (typeof options_msg === 'string') { //means it is the 'msg' config
-            options.msg = options_msg;
-            options.color = color || 'green'; //defaults to green
-            options.timeOut = timeOut;
+            options = {
+                msg: options_msg,
+                color: color || 'green', //defaults to green
+                timeOut: timeOut
+            };
         }
         else {
             options = options_msg;
@@ -139,11 +150,13 @@ var BannerProvider = function (_a) {
         return "INFO-".concat(counter); //bannerId
     };
     var SET_ALERT_BANNER = function (options_msg, color, timeOut) {
-        var options = {};
+        var options;
         if (typeof options_msg === 'string') { //means it is the 'msg' config
-            options.msg = options_msg;
-            options.color = color || 'green'; //defaults to green
-            options.timeOut = timeOut;
+            options = {
+                msg: options_msg,
+                color: color || 'green', //defaults to green
+                timeOut: timeOut
+            };
         }
         else {
             options = options_msg;
@@ -151,18 +164,36 @@ var BannerProvider = function (_a) {
         BANNER_DISPATCH({ type: "ADD_ALERT", payload: options });
         return "ALERT-".concat(counter); //bannerId
     };
-    return (react_1.default.createElement(exports.BannerContext.Provider, { value: {
-            BANNER_STATE: BANNER_STATE,
-            SET_INFO_BANNER: SET_INFO_BANNER,
-            SET_ALERT_BANNER: SET_ALERT_BANNER,
-            REMOVE_ALERT_BANNER: REMOVE_ALERT_BANNER,
-            REMOVE_INFO_BANNER: REMOVE_INFO_BANNER,
-            REMOVE_ALL_INFO_BANNERS: REMOVE_ALL_INFO_BANNERS,
-            REMOVE_ALL_ALERT_BANNERS: REMOVE_ALL_ALERT_BANNERS
-        } }, children));
+    var contextValue = {
+        BANNER_STATE: BANNER_STATE,
+        SET_INFO_BANNER: SET_INFO_BANNER,
+        SET_ALERT_BANNER: SET_ALERT_BANNER,
+        REMOVE_ALERT_BANNER: REMOVE_ALERT_BANNER,
+        REMOVE_INFO_BANNER: REMOVE_INFO_BANNER,
+        REMOVE_ALL_INFO_BANNERS: REMOVE_ALL_INFO_BANNERS,
+        REMOVE_ALL_ALERT_BANNERS: REMOVE_ALL_ALERT_BANNERS
+    };
+    return react_1.default.createElement(exports.BannerContext.Provider, { value: contextValue }, children);
 };
 exports.BannerProvider = BannerProvider;
+/**
+ * @hook useBannerContext
+ *
+ * - The props object containing the following properties:
+ * @property {BannerState} BANNER_STATE: The state of the banner.
+ * @property {(options_msg: string | Omit<BannerEntry, "id">, color?: string, timeOut?: number) => string} SET_INFO_BANNER: A callback function to be called when adding an info banner. The function takes the text to be displayed in the banner, the color of the banner, and the time in milliseconds to wait before removing the banner as arguments.
+ * @property {(options_msg: string | Omit<BannerEntry, "id">, color?: string, timeOut?: number) => string} SET_ALERT_BANNER: A callback function to be called when adding an alert banner. The function takes the text to be displayed in the banner, the color of the banner, and the time in milliseconds to wait before removing the banner as arguments.
+ * @property {(e: React.MouseEvent | null, id: string) => void} REMOVE_ALERT_BANNER: A callback function to be called when removing an alert banner. The function takes the mouse event and the id of the banner as arguments.
+ * @property {(e: React.MouseEvent | null, id: string) => void} REMOVE_INFO_BANNER: A callback function to be called when removing an info banner. The function takes the mouse event and the id of the banner as arguments.
+ * @property {(e: React.MouseEvent) => void} REMOVE_ALL_INFO_BANNERS: A callback function to be called when removing all info banners. The function takes the mouse event as an argument.
+ * @property {(e: React.MouseEvent) => void} REMOVE_ALL_ALERT_BANNERS: A callback function to be called when removing all alert banners. The function takes the mouse event as an argument.
+ * @return {BannerContextType} The context value.
+ */
 var useBannerContext = function () {
-    return (0, react_1.useContext)(exports.BannerContext);
+    var context = (0, react_1.useContext)(exports.BannerContext);
+    if (context === undefined) {
+        throw new Error('useBannerContext must be used within a BannerProvider');
+    }
+    return context;
 };
 exports.useBannerContext = useBannerContext;

package/dist/components/Banners/index.d.ts

@@ -1,9 +1,78 @@
-export function BannerAlert({ BANNER_STATE, REMOVE_ALERT_BANNER }: {
-    BANNER_STATE: any;
-    REMOVE_ALERT_BANNER: any;
-}): React.JSX.Element;
-export function BannerInfo({ BANNER_STATE, REMOVE_INFO_BANNER }: {
-    BANNER_STATE: any;
-    REMOVE_INFO_BANNER: any;
-}): React.JSX.Element;
 import React from "react";
+export type IconColor = 'red' | 'green' | 'yellow' | 'dark' | 'grey';
+export interface DisplayIconProps {
+    color: IconColor;
+}
+export interface BannerCTA {
+    to?: string;
+    action?: () => void;
+    text: string;
+}
+export interface BannerProps {
+    color: IconColor;
+    cta?: BannerCTA;
+    msg: string;
+    handleRemove: (e: React.MouseEvent | null, id: string) => void;
+    id: string;
+    timeOut?: number;
+    showIcon?: boolean;
+    bottomStroke?: boolean;
+    hideCloseButton?: boolean;
+}
+export interface BannerState {
+    id: string;
+    color: IconColor;
+    msg: string;
+    cta?: BannerCTA;
+    timeOut?: number;
+    showIcon?: boolean;
+    hideCloseButton?: boolean;
+}
+export interface BannerAlertProps {
+    BANNER_STATE: {
+        alertState: BannerState[];
+    };
+    REMOVE_ALERT_BANNER: (e: React.MouseEvent | null, id: string) => void;
+}
+/**
+ * @component Renders a list of alert banners with customizable text, color and styling.
+ *
+ * - The props object containing the following properties
+ * @prop {BannerState[]} alertState: An array of BannerState objects, each containing the properties of a banner component.
+ * @prop {(e: React.MouseEvent | null, id: string) => void} REMOVE_ALERT_BANNER: A callback function to be called when a banner is removed. The function takes the mouse event and the id of the banner as arguments.
+ * @return {ReactElement} The rendered list of alert banners component.
+ *
+ * @typedef {Object} BannerState
+ * @prop {string} id: The id of the banner.
+ * @prop {IconColor} color: The color of the banner.
+ * @prop {string} msg: The text to be displayed in the banner.
+ * @prop {BannerCTA} cta: An object containing the info about the cta button.
+ * @prop {number} timeOut: The time in milliseconds to wait before removing the banner. Defaults to 3000.
+ * @prop {boolean} showIcon: A boolean indicating whether to show the icon in the banner. Defaults to true.
+ * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
+ */
+export declare const BannerAlert: React.FunctionComponent<BannerAlertProps>;
+export interface BannerInfoProps {
+    BANNER_STATE: {
+        infoState: BannerState[];
+    };
+    REMOVE_INFO_BANNER: (e: React.MouseEvent | null, id: string) => void;
+}
+/**
+ * @component Renders a list of info banners with customizable text, color and styling.
+ *
+ * - The props object containing the following properties
+ * @prop {BannerState[]} infoState: An array of BannerState objects, each containing the properties of a banner component.
+ * @prop {(e: React.MouseEvent | null, id: string) => void} REMOVE_INFO_BANNER: A callback function to be called when a banner is removed. The function takes the mouse event and the id of the banner as arguments.
+ * @return {ReactElement} The rendered list of info banners component.
+ *
+ * @typedef {Object} BannerState
+ * @prop {string} id: The id of the banner.
+ * @prop {IconColor} color: The color of the banner.
+ * @prop {string} msg: The text to be displayed in the banner.
+ * @prop {BannerCTA} cta: An object containing the info about the cta button.
+ * @prop {number} timeOut: The time in milliseconds to wait before removing the banner. Defaults to 3000.
+ * @prop {boolean} showIcon: A boolean indicating whether to show the icon in the banner. Defaults to true.
+ * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
+ */
+export declare const BannerInfo: React.FunctionComponent<BannerInfoProps>;

package/dist/components/Banners/index.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerInfo = exports.BannerAlert = void 0;
 var react_1 = __importStar(require("react"));
-var index_styled_1 = require("./index.styled");
+var styled_1 = require("./styled");
 var react_router_dom_1 = require("react-router-dom");
 var Buttons_1 = require("../Buttons");
 var icons_1 = require("../../icons");
@@ -42,20 +42,41 @@ var DisplayIcon = function (_a) {
     var IconComp = icons_1.icons[ICONS[color]];
     return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: 20, weight: "bold" }));
 };
+/**
+ * @component Renders a banner component with customizable text, color and styling.
+ *
+ * - The object containing the following properties:
+ * @prop {IconColor} color: The color of the banner.
+ * @prop {BannerCTA} cta: The object containing the info about the cta button.
+ * @prop {string} msg: The text to be displayed in the banner.
+ * @prop {(e: React.MouseEvent | null, id: string) => void} handleRemove: The callback function to be called when the banner is removed.
+ * @prop {string} id: The id of the banner.
+ * @prop {number} timeOut: The time in milliseconds to wait before removing the banner. Defaults to 3000.
+ * @prop {boolean} showIcon: A boolean indicating whether to show the icon in the banner. Defaults to true.
+ * @prop {boolean} bottomStroke: A boolean indicating whether to show the bottom stroke in the banner. Defaults to true.
+ * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
+ * @return {ReactElement} The rendered banner component.
+ */
 var Banner = function (_a) {
     var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, timeOut = _a.timeOut, showIcon = _a.showIcon, _b = _a.bottomStroke, bottomStroke = _b === void 0 ? true : _b, _c = _a.hideCloseButton, hideCloseButton = _c === void 0 ? false : _c;
     var _d = (0, react_1.useState)(0), height = _d[0], setHeight = _d[1];
-    var ContainerRef = (0, react_1.useRef)();
+    var ContainerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         var timer;
-        setHeight(ContainerRef.current.scrollHeight);
-        if (timeOut)
+        if (ContainerRef.current) {
+            setHeight(ContainerRef.current.scrollHeight);
+        }
+        if (timeOut) {
             timer = setTimeout(function () {
                 setHeight(0);
                 remove(null, id);
             }, timeOut);
-        return function () { return (timeOut ? clearTimeout(timer) : null); };
-    }, [cta, id, msg]);
+        }
+        return function () {
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [cta, id, msg, timeOut]);
     var remove = function (e, id) {
         setHeight(0);
         setTimeout(function () {
@@ -63,18 +84,35 @@ var Banner = function (_a) {
         }, 300);
     };
     var genCTA = function (cta) {
-        var LinkWrapper = cta.to ? react_router_dom_1.Link : react_1.Fragment; //sometimes we wanna pass the cta as a 'to' string rather than a action function so that it is serializable
+        var LinkWrapper = cta.to ? react_router_dom_1.Link : react_1.Fragment;
         return (react_1.default.createElement(LinkWrapper, { to: cta.to },
-            react_1.default.createElement(Buttons_1.ButtonSecondary, { style: { marginTop: "0.5rem", marginBottom: "0.5rem" }, S: true, onClick: !cta.to && cta.action, invert: color === "dark" ? true : false }, cta === null || cta === void 0 ? void 0 : cta.text)));
+            react_1.default.createElement(Buttons_1.ButtonSecondary, { style: { marginTop: "0.5rem", marginBottom: "0.5rem" }, S: true, onClick: !cta.to && cta.action, invert: color === "dark" }, cta === null || cta === void 0 ? void 0 : cta.text)));
     };
-    return (react_1.default.createElement(index_styled_1.BannerAnimateStyled, { key: id, ref: ContainerRef, height: height },
-        react_1.default.createElement(index_styled_1.BannerWrapperStyled, { bottomStroke: bottomStroke, color: color },
-            react_1.default.createElement(index_styled_1.BannerStyled, null,
+    return (react_1.default.createElement(styled_1.BannerAnimateStyled, { key: id, ref: ContainerRef, height: height },
+        react_1.default.createElement(styled_1.BannerWrapperStyled, { bottomStroke: bottomStroke, color: color },
+            react_1.default.createElement(styled_1.BannerStyled, null,
                 showIcon && react_1.default.createElement(DisplayIcon, { color: color }),
                 react_1.default.createElement(Typo_1.SANS_2, null, msg),
                 cta && genCTA(cta)),
-            hideCloseButton !== true && react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", invert: color === "dark" ? true : false, onClick: function (e) { return remove(e, id); } }))));
+            hideCloseButton !== true && react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", invert: color === "dark", onClick: function (e) { return remove(e, id); } }))));
 };
+/**
+ * @component Renders a list of alert banners with customizable text, color and styling.
+ *
+ * - The props object containing the following properties
+ * @prop {BannerState[]} alertState: An array of BannerState objects, each containing the properties of a banner component.
+ * @prop {(e: React.MouseEvent | null, id: string) => void} REMOVE_ALERT_BANNER: A callback function to be called when a banner is removed. The function takes the mouse event and the id of the banner as arguments.
+ * @return {ReactElement} The rendered list of alert banners component.
+ *
+ * @typedef {Object} BannerState
+ * @prop {string} id: The id of the banner.
+ * @prop {IconColor} color: The color of the banner.
+ * @prop {string} msg: The text to be displayed in the banner.
+ * @prop {BannerCTA} cta: An object containing the info about the cta button.
+ * @prop {number} timeOut: The time in milliseconds to wait before removing the banner. Defaults to 3000.
+ * @prop {boolean} showIcon: A boolean indicating whether to show the icon in the banner. Defaults to true.
+ * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
+ */
 var BannerAlert = function (_a) {
     var _b;
     var BANNER_STATE = _a.BANNER_STATE, REMOVE_ALERT_BANNER = _a.REMOVE_ALERT_BANNER;
@@ -82,15 +120,34 @@ var BannerAlert = function (_a) {
     (0, react_1.useEffect)(function () {
         setTimeout(function () {
             var ele = document.getElementById("bannerInfo");
-            setTop(ele.offsetHeight);
+            if (ele) {
+                setTop(ele.offsetHeight);
+            }
         }, 100);
-    });
-    return (react_1.default.createElement(index_styled_1.BannerAlertStyled, { top: top }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.alertState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_ALERT_BANNER, timeOut: e.timeOut, showIcon: e.showIcon, hideCloseButton: e.hideCloseButton })); })));
+    }, []);
+    return (react_1.default.createElement(styled_1.BannerAlertStyled, { top: top }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.alertState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_ALERT_BANNER, timeOut: e.timeOut, showIcon: e.showIcon, hideCloseButton: e.hideCloseButton })); })));
 };
 exports.BannerAlert = BannerAlert;
+/**
+ * @component Renders a list of info banners with customizable text, color and styling.
+ *
+ * - The props object containing the following properties
+ * @prop {BannerState[]} infoState: An array of BannerState objects, each containing the properties of a banner component.
+ * @prop {(e: React.MouseEvent | null, id: string) => void} REMOVE_INFO_BANNER: A callback function to be called when a banner is removed. The function takes the mouse event and the id of the banner as arguments.
+ * @return {ReactElement} The rendered list of info banners component.
+ *
+ * @typedef {Object} BannerState
+ * @prop {string} id: The id of the banner.
+ * @prop {IconColor} color: The color of the banner.
+ * @prop {string} msg: The text to be displayed in the banner.
+ * @prop {BannerCTA} cta: An object containing the info about the cta button.
+ * @prop {number} timeOut: The time in milliseconds to wait before removing the banner. Defaults to 3000.
+ * @prop {boolean} showIcon: A boolean indicating whether to show the icon in the banner. Defaults to true.
+ * @prop {boolean} hideCloseButton: A boolean indicating whether to hide the close button in the banner. Defaults to false.
+ */
 var BannerInfo = function (_a) {
     var _b;
     var BANNER_STATE = _a.BANNER_STATE, REMOVE_INFO_BANNER = _a.REMOVE_INFO_BANNER;
-    return (react_1.default.createElement(index_styled_1.BannerInfoStyled, { id: "bannerInfo" }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_INFO_BANNER, timeOut: e.timeOut, showIcon: e.showIcon, bottomStroke: false, hideCloseButton: e.hideCloseButton })); })));
+    return (react_1.default.createElement(styled_1.BannerInfoStyled, { id: "bannerInfo" }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_INFO_BANNER, timeOut: e.timeOut, showIcon: e.showIcon, bottomStroke: false, hideCloseButton: e.hideCloseButton })); })));
 };
 exports.BannerInfo = BannerInfo;

package/dist/components/Banners/styled.d.ts

@@ -0,0 +1,23 @@
+export interface ColorConfig {
+    [key: string]: {
+        bgColor: string;
+        color?: string;
+    };
+}
+declare const colorConfig: ColorConfig;
+interface BannerAnimateStyledProps {
+    height: number;
+}
+export declare const BannerAnimateStyled: import("styled-components").StyledComponent<"div", any, BannerAnimateStyledProps, never>;
+interface BannerWrapperStyledProps {
+    color: keyof typeof colorConfig;
+    bottomStroke?: boolean;
+}
+export declare const BannerWrapperStyled: import("styled-components").StyledComponent<"div", any, BannerWrapperStyledProps, never>;
+export declare const BannerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface BannerAlertStyledProps {
+    top: number;
+}
+export declare const BannerAlertStyled: import("styled-components").StyledComponent<"div", any, BannerAlertStyledProps, never>;
+export declare const BannerInfoStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/components/Banners/{index.styled.js → styled.js}

@@ -43,28 +43,22 @@ exports.BannerAnimateStyled = styled_components_1.default.div(templateObject_1 |
     var height = _a.height;
     return height;
 });
-exports.BannerWrapperStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  padding: 0.5rem 2rem;\n  position: relative;\n\n  gap: 1rem;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  ", "\n\n  /* box-shadow: ", "; */\n\n  color: ", ";\n\n  ", " {\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  padding: 0.5rem 2rem;\n  position: relative;\n\n  gap: 1rem;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  ", "\n\n  /* box-shadow: ", "; */\n\n  color: ", ";\n\n  ", " {\n    align-items: center;\n  }\n"])), greyColor15, function (_a) {
+exports.BannerWrapperStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  padding: 0.5rem 2rem;\n  position: relative;\n  gap: 1rem;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  ", "\n\n  color: ", ";\n\n  ", " {\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  padding: 0.5rem 2rem;\n  position: relative;\n  gap: 1rem;\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n\n  ", "\n\n  color: ", ";\n\n  ", " {\n    align-items: center;\n  }\n"])), greyColor15, function (_a) {
     var _b;
     var color = _a.color;
     return (_b = colorConfig[color]) === null || _b === void 0 ? void 0 : _b.bgColor;
 }, function (_a) {
-    var bottomStroke = _a.bottomStroke;
-    return bottomStroke && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: inset 00px -2px 0px ", ";\n    "], ["\n      box-shadow: inset 00px -2px 0px ", ";\n    "])), function (_a) {
-        var _b;
-        var color = _a.color;
-        return (_b = colorConfig[color]) === null || _b === void 0 ? void 0 : _b.color;
-    });
-}, function (_a) {
-    var bottomStroke = _a.bottomStroke;
-    return bottomStroke && "";
+    var _b;
+    var bottomStroke = _a.bottomStroke, color = _a.color;
+    return bottomStroke && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: inset 0px -2px 0px ", ";\n    "], ["\n      box-shadow: inset 0px -2px 0px ", ";\n    "])), (_b = colorConfig[color]) === null || _b === void 0 ? void 0 : _b.color);
 }, function (_a) {
     var color = _a.color;
     return (color === "dark" ? white : "");
 }, (0, mixins_1.mediaQuery)("sm"));
 exports.BannerStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  width: 100%;\n"])));
-exports.BannerAlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 1000000000; //whatever this is, it should be more than modal\n  width: 100%;\n  ", ";\n\n  ", "\n"], ["\n  position: sticky;\n  z-index: 1000000000; //whatever this is, it should be more than modal\n  width: 100%;\n  ", ";\n\n  ", "\n"])), function (_a) {
+exports.BannerAlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 1000000000;\n  width: 100%;\n  ", ";\n\n  ", "\n"], ["\n  position: sticky;\n  z-index: 1000000000;\n  width: 100%;\n  ", ";\n\n  ", "\n"])), function (_a) {
     var top = _a.top;
-    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      top: ", "px;\n    "], ["\n      top: ", "px;\n    "])), top);
+    return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    top: ", "px;\n  "], ["\n    top: ", "px;\n  "])), top);
 }, (0, mixins_1.transition)("top"));
 exports.BannerInfoStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 1000000000;\n  top: 0;\n  width: 100%;\n"], ["\n  position: sticky;\n  z-index: 1000000000;\n  top: 0;\n  width: 100%;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/PercentBarChart/comps/CustomizedLabel/index.d.ts

@@ -5,14 +5,13 @@ type TCustomizedLabeValue = {
     count: number;
     name: string;
 };
-export declare const CustomizedLabel: ({ y, width, height, value, showCount, suffix, opacity, _base_configs, onMouseOver, onMouseOut, onMouseDown, }: {
+export declare const CustomizedLabel: ({ y, width, height, value, plotDataPoint, opacity, _base_configs, onMouseOver, onMouseOut, onMouseDown, }: {
     y?: number | string;
     width?: number | string;
     height?: number | string;
     value?: TCustomizedLabeValue;
     opacity: number;
-    suffix?: string;
-    showCount?: boolean;
+    plotDataPoint?: "percentage" | "count";
     _base_configs: TBaseConfigs;
     onMouseOver?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
     onMouseOut?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;

package/dist/components/PercentBarChart/comps/CustomizedLabel/index.js

@@ -8,7 +8,7 @@ var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../../../themes");
 var CustomizedLabel = function (_a) {
     var y = _a.y, width = _a.width, //i think this is the width and the height of the bar. dont need it just yet..
-    height = _a.height, value = _a.value, showCount = _a.showCount, suffix = _a.suffix, opacity = _a.opacity, _base_configs = _a._base_configs, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onMouseDown = _a.onMouseDown;
+    height = _a.height, value = _a.value, plotDataPoint = _a.plotDataPoint, opacity = _a.opacity, _base_configs = _a._base_configs, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onMouseDown = _a.onMouseDown;
     var yOffset = -(_base_configs.labelToBarGap + _base_configs.barHeight);
     var percent = value.percentage;
     var count = value.count;
@@ -16,8 +16,14 @@ var CustomizedLabel = function (_a) {
     var percentXOffset = 0;
     var xOffsetRelative = 10;
     return (react_1.default.createElement("g", null,
-        react_1.default.createElement("text", { opacity: opacity, x: percentXOffset, y: y + yOffset, fill: themes_1.colors.greyColor100, textAnchor: "start", dominantBaseline: "middle", className: "UI_BODY_BOLD_SM" }, "".concat(percent).concat(suffix || ""),
-            react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, showCount ? count : ""),
+        react_1.default.createElement("text", { opacity: opacity, x: percentXOffset, y: y + yOffset, fill: themes_1.colors.greyColor100, textAnchor: "start", dominantBaseline: "middle", className: "UI_BODY_BOLD_SM" },
+            plotDataPoint === "percentage"
+                ? percent + "%"
+                : plotDataPoint === "count"
+                    ? count
+                    : "",
+            plotDataPoint === "percentage" && ( // basically no need to show this only if plotDataPoint is count, since in that case, count is already shown above
+            react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, count)),
             react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, name)),
         react_1.default.createElement("rect", { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, value); }, onMouseOver: function (e) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, value); }, onMouseOut: function (e) { return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, value); }, x: percentXOffset, y: y + _base_configs.mouseEventDetectorYOffset, width: width, height: _base_configs.mouseEventDetectorHeight, fill: "red", "fill-opacity": _base_configs.mouseEventDetectorOpacity })));
 };

package/dist/components/PercentBarChart/index.d.ts

@@ -7,7 +7,7 @@ export type TBaseConfigs = {
     mouseEventDetectorHeight: number;
     mouseEventDetectorOpacity: number;
 };
-export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, colorIdx, valueSuffix, showCount }: {
+export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, colorIdx, plotDataPoint, }: {
     data: any;
     valuePath: string;
     labelPath: string;
@@ -16,5 +16,7 @@ export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPat
     colors?: string[];
     colorIdx?: number;
     valueSuffix?: string;
+    plotDataPoint?: 'percentage' | 'count';
     showCount?: boolean;
+    showPercent?: boolean;
 }) => React.JSX.Element;

package/dist/components/PercentBarChart/index.js

@@ -83,28 +83,23 @@ var PercentBarChart = function (_a) {
     _c = _a.labelPath, // is relevant only for the initial data setting in useMemo. after that, the actual percentage is always stored against the 'percentage' key, and the count against the 'count' key
     labelPath = _c === void 0 ? "name" : _c, // same as above for label path
     onClick = _a.onClick, _d = _a.colors, colors = _d === void 0 ? chartColors : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, //if you are rendering a grid of such charts, then maybe you want each of their colors to be different. in that case, increment this idx from the parent component 
-    _f = _a.valueSuffix, //if you are rendering a grid of such charts, then maybe you want each of their colors to be different. in that case, increment this idx from the parent component 
-    valueSuffix = _f === void 0 ? "%" : _f, _g = _a.showCount, showCount = _g === void 0 ? true : _g;
+    _f = _a.plotDataPoint, //if you are rendering a grid of such charts, then maybe you want each of their colors to be different. in that case, increment this idx from the parent component 
+    plotDataPoint = _f === void 0 ? 'percentage' : _f;
     var totalCount = (0, getTotalCount_1.getTotalCount)({ data: _data, countPath: valuePath });
     var data = (0, react_1.useMemo)(function () {
         var finalData = __spreadArray([], _data, true);
         finalData = finalData.map(function (d, i) {
-            var percentage = (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount);
             var count = (0, _EXPORTS_1.getVal)(d, valuePath);
             return ({
-                labels: {
-                    percentage: percentage,
-                    count: count,
-                    name: (0, _EXPORTS_1.getVal)(d, labelPath),
-                },
+                labels: __assign(__assign({}, (plotDataPoint === 'percentage' ? { percentage: (0, _EXPORTS_1.getPercentage)((0, _EXPORTS_1.getVal)(d, valuePath), totalCount) } : {})), { count: count, name: (0, _EXPORTS_1.getVal)(d, labelPath) }),
             });
         });
         finalData.sort(function (a, b) {
-            return Number(b.value || 0) - Number(a.value || 0);
+            return Number((0, _EXPORTS_1.getVal)(b, "labels.".concat(plotDataPoint)) || 0) - Number((0, _EXPORTS_1.getVal)(a, "labels.".concat(plotDataPoint)) || 0);
         });
         return finalData;
     }, [_data, labelPath, valuePath]);
-    var _h = (0, react_1.useState)(undefined), activeBar = _h[0], setActiveBar = _h[1];
+    var _g = (0, react_1.useState)(undefined), activeBar = _g[0], setActiveBar = _g[1];
     var changeBarOpacityFn = function (name) {
         return activeBar && activeBar !== name ? 0.4 : 1;
     };
@@ -137,13 +132,12 @@ var PercentBarChart = function (_a) {
                     } },
                     react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
                     react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category" }),
-                    react_1.default.createElement(recharts_1.Bar, { radius: _base_configs.barRadius, style: onClick ? { cursor: "pointer" } : {}, dataKey: "labels.percentage" },
+                    react_1.default.createElement(recharts_1.Bar, { radius: _base_configs.barRadius, style: onClick ? { cursor: "pointer" } : {}, dataKey: "labels.".concat(plotDataPoint) },
                         react_1.default.createElement(recharts_1.LabelList, { dataKey: "labels", offset: 0, content: function (props) { return react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, __assign({ y: props.y,
                                 width: props.width,
                                 height: props.height,
                                 value: props.value, //here value is the percentage
-                                showCount: showCount, suffix: valueSuffix,
-                                opacity: changeBarOpacityFn(props.value.name), _base_configs: _base_configs }, (onClick
+                                plotDataPoint: plotDataPoint, opacity: changeBarOpacityFn(props.value.name), _base_configs: _base_configs }, (onClick
                                 ? {
                                     onMouseOver: function (e, value) { return setActiveBar(value.name); },
                                     onMouseOut: function () { return setActiveBar(undefined); },

package/dist/components/VideoInput/index.d.ts

@@ -14,5 +14,5 @@ declare function VideoInput({ id, label, sublabel, isRequired, value: _value, on
     files: any;
     width: any;
     height: any;
-}): React.JSX.Element;
+}, ...args: any[]): React.JSX.Element;
 import React from 'react';

package/dist/components/VideoInput/index.js

@@ -1,4 +1,15 @@
 "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;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -39,9 +50,11 @@ var useFakeUploadImpression_1 = require("../../utilsOolib/useFakeUploadImpressio
 var bannerContext_1 = require("../Banners/bannerContext");
 var VideoActionMenu_1 = require("./comps/VideoActionMenu");
 var FileUploadWrapper_1 = require("../FileUploadWrapper");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
 function VideoInput(_a) {
     var id = _a.id, label = _a.label, sublabel = _a.sublabel, isRequired = _a.isRequired, _value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, lightPlayer = _a.light, _b = _a.enableVideoUpload, enableVideoUpload = _b === void 0 ? false : _b, isInRTE = _a.isInRTE, invert = _a.invert, files = _a.files, // //used by RTEVideoInput
     width = _a.width, height = _a.height;
+    var props = arguments[0];
     //backwards compatibility
     var value = typeof _value === 'string'
         ? [{ publicUrl: _value }]
@@ -111,7 +124,7 @@ function VideoInput(_a) {
         }
     };
     return (react_1.default.createElement(react_1.Fragment, null,
-        react_1.default.createElement(BlockLabel_1.BlockLabel, { label: label, sublabel: sublabel, isRequired: isRequired, readOnly: readOnly, invert: invert }),
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
         readOnly ? (createVideoPreview({ value: value })) :
             (value === null || value === void 0 ? void 0 : value.length) > 0 ? (createVideoPreview({ value: value, actionMenuButton: true })) :
                 react_1.default.createElement(FileUploadWrapper_1.FileUploadWrapper, { height: '18rem', isLoading: isLoading, uploadProgress: uploadProgress, enableClickUpload: false, mediaType: 'video', handleUpload: handleUpload },

package/dist/stories/Oolib/components/PercentBarChart.stories.js

@@ -10,10 +10,10 @@ exports.default = {
     title: "Components/PercentBarChart",
 };
 var data = [
-    { display: "Great food", value: 72, },
-    { display: "Great Ambience", value: 10, },
-    { display: "Great Music", value: 9, },
-    { display: "Great Cocktails", value: 5, },
+    { display: 'Logged In Once', value: 60 },
+    { display: 'Registered Users', value: 100 },
+    { display: 'Created Profile', value: 20 },
+    { display: 'Wrote at least 1 story', value: 8 }
 ];
 var PercentBarChart_ = function (args) {
     var handleBarClick = function (name) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.135.1",
+  "version": "2.136.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/Banners/index.styled.d.ts

@@ -1,5 +0,0 @@
-export const BannerAnimateStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const BannerWrapperStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const BannerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const BannerAlertStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const BannerInfoStyled: import("styled-components").StyledComponent<"div", any, {}, never>;