oolib 2.190.4 → 2.192.0

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

@@ -1,6 +1,7 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, CSSProperties } from 'react';
 interface DividerProps {
     invert?: boolean;
+    style?: CSSProperties;
 }
 export declare const Divider: FunctionComponent<DividerProps>;
 export {};

package/dist/components/Divider/index.js

@@ -16,8 +16,8 @@ var StyledHr = styled_components_1.default.hr(templateObject_1 || (templateObjec
     return (invert ? themes_1.colors.greyColor80 : themes_1.colors.greyColor15);
 });
 var Divider = function (_a) {
-    var invert = _a.invert;
-    return react_1.default.createElement(StyledHr, { invert: invert });
+    var invert = _a.invert, style = _a.style;
+    return react_1.default.createElement(StyledHr, { invert: invert, style: style });
 };
 exports.Divider = Divider;
 var templateObject_1;

package/dist/components/Dropdowns/comps/OptionsMulti/index.js

@@ -138,6 +138,7 @@ var OptionsMulti = function (_a) {
         react_1.default.createElement("div", { style: { padding: "1rem" }, onBlur: function () { return setSearchBarFocus(false); }, tabIndex: 0 },
             react_1.default.createElement(TextInputs_1.TextInput, { placeholder: searchbarPlaceholder, forceFocus: searchBarFocus, invert: invert, type: "text", icon: "MagnifyingGlass", value: searchString, onChange: function (k, v) { return setSearchString(v); }, S: S })),
         react_1.default.createElement(Divider_1.Divider, { invert: invert }))); };
+    console.log({ options: options });
     return (react_1.default.createElement(OptionsShell_1.OptionsShell, { ref: optionsRef, yOrientation: yOrientation, lightboxHeight: lightboxHeight, lightboxStyle: lightboxStyle, options: options, optionsAnchor: optionsAnchor, showOptions: showOptions, handleHideOptions: handleHideOptions, SelectComp: SelectComp, label: label, optionsModalLabel: optionsModalLabel, invert: invert, showDoneButton: true, popOutOfOverflowHiddenParent: popOutOfOverflowHiddenParent, relativeToRef: relativeToRef, S: S, alignDropdown: alignDropdown },
         isSearchable && genSearchBar(),
         !isTagsStyle && createSelectedOptions(),

package/dist/components/ImageInput/comps/ImageEditor/index.js

@@ -77,7 +77,7 @@ function ImageEditor(_a) {
     //sent by parent ImageEditor to child (modal) ImageEditor
     _underEditImageData = _a.underEditImageData, //ImageEditor passes this to its recursive self when opening in popup
     _setUnderEditImageData = _a.setUnderEditImageData, isInPopUp = _a.isInPopUp, isInRTE = _a.isInRTE, handleDragStart = _a.handleDragStart;
-    console.log({ imageTags: imageTags });
+    // console.log({imageTags})
     var theme = (0, styled_components_1.useTheme)();
     var _c = theme || {}, LexicalTextEditor = _c.LexicalTextEditor, _d = _c.lexicalTextEditorHasValue, lexicalTextEditorHasValue = _d === void 0 ? function () { return false; } : _d, //we are just defaulting to false for oolib preview. Meaning, when previewing in oolib, since this function doesnt exist (as it has to be provided by okf-fe), we will always return false from it.
     TagsInputSingle = _c.TagsInputSingle, TagsInputMulti = _c.TagsInputMulti, 

package/dist/stories/v2/components/{Dropdowns.stories.d.ts → Dropdown/Dropdowns.stories.d.ts}

@@ -43,37 +43,29 @@ declare namespace _default {
             let name_4: string;
             export { name_4 as name };
         }
-        namespace optionImage {
+        namespace optionDescription {
             let name_5: string;
             export { name_5 as name };
         }
-        namespace optionDescription {
+        namespace colors {
             let name_6: string;
             export { name_6 as name };
         }
-        namespace colors {
+        namespace disabled {
             let name_7: string;
             export { name_7 as name };
         }
-        namespace disabled {
+        namespace readOnly {
             let name_8: string;
             export { name_8 as name };
         }
-        namespace readOnly {
+        namespace showColorInSelectArea {
             let name_9: string;
             export { name_9 as name };
         }
-        namespace invert {
+        namespace alignDropdown {
             let name_10: string;
             export { name_10 as name };
-        }
-        namespace showColorInSelectArea {
-            let name_11: string;
-            export { name_11 as name };
-        }
-        namespace alignDropdown {
-            let name_12: string;
-            export { name_12 as name };
             let options_2: string[];
             export { options_2 as options };
             export namespace control_3 {
@@ -82,20 +74,55 @@ declare namespace _default {
             }
             export { control_3 as control };
         }
+        namespace lightboxHeight {
+            let name_11: string;
+            export { name_11 as name };
+            let options_3: string[];
+            export { options_3 as options };
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+            }
+            export { control_4 as control };
+        }
+        namespace variant {
+            let name_12: string;
+            export { name_12 as name };
+            let options_4: string[];
+            export { options_4 as options };
+            export namespace control_5 {
+                let type_5: string;
+                export { type_5 as type };
+            }
+            export { control_5 as control };
+        }
+        namespace dataOptions {
+            let name_13: string;
+            export { name_13 as name };
+            let options_5: string[];
+            export { options_5 as options };
+            export namespace control_6 {
+                let type_6: string;
+                export { type_6 as type };
+            }
+            export { control_6 as control };
+        }
     }
     namespace args {
         let placeholder_1: string;
         export { placeholder_1 as placeholder };
         let size_1: string;
         export { size_1 as size };
+        let variant_1: string;
+        export { variant_1 as variant };
         let selection_1: string;
         export { selection_1 as selection };
+        let dataOptions_1: string;
+        export { dataOptions_1 as dataOptions };
         let isSearchable_1: boolean;
         export { isSearchable_1 as isSearchable };
         let optionDescription_1: string;
         export { optionDescription_1 as optionDescription };
-        let optionImage_1: string;
-        export { optionImage_1 as optionImage };
         let optionIcon_1: any;
         export { optionIcon_1 as optionIcon };
         let showIconInSelectArea_1: boolean;
@@ -108,11 +135,12 @@ declare namespace _default {
         export { disabled_1 as disabled };
         let readOnly_1: boolean;
         export { readOnly_1 as readOnly };
-        let invert_1: boolean;
-        export { invert_1 as invert };
         export let popOutOfOverflowHiddenParent: boolean;
         let alignDropdown_1: string;
         export { alignDropdown_1 as alignDropdown };
+        export let isTagsStyle: boolean;
+        export let matchSelectInputWidth: boolean;
+        export let loading: boolean;
     }
 }
 export default _default;

package/dist/stories/v2/components/Dropdown/Dropdowns.stories.js

@@ -0,0 +1,204 @@
+"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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdowns = void 0;
+var react_1 = __importStar(require("react"));
+var Container_1 = require("../../../../components/Container");
+var Paddings_1 = require("../../../../components/Paddings");
+var icons_1 = require("../../../../icons");
+var DropdownSingle_1 = require("../../../../v2/components/Dropdowns/DropdownSingle");
+var DropdownMulti_1 = require("../../../../v2/components/Dropdowns/DropdownMulti");
+var dropdownOptions_1 = require("./dropdownOptions");
+var availableIcons = __spreadArray([undefined], Object.keys(icons_1.icons).sort(), true);
+exports.default = {
+    title: "Oolib V 2.0/Components/Dropdowns",
+    argTypes: {
+        // label: {
+        //   name: "Label",
+        // },
+        // sublabel: {
+        //   name: "Sub Label",
+        // },
+        placeholder: {
+            name: "Placeholder Text",
+        },
+        optionIcon: {
+            options: availableIcons,
+            control: { type: "select" },
+        },
+        selection: {
+            options: ["single", "multi"],
+            control: { type: "inline-radio" },
+        },
+        size: {
+            name: "Size",
+            control: { type: "inline-radio" },
+            options: ["Small", "Medium"],
+            mapping: {
+                Small: "S",
+                Medium: "M",
+            },
+        },
+        selection: {
+            name: "Selection Type",
+            options: ["single", "multi"],
+            control: { type: "select" },
+        },
+        isSearchable: {
+            name: "Searchable",
+        },
+        showIconInSelectArea: {
+            name: "Show Icon in Select Area",
+        },
+        // optionImage: {
+        //   name: "Option Image",
+        // },
+        optionDescription: {
+            name: "Option Description",
+        },
+        colors: {
+            name: 'Show Colors'
+        },
+        disabled: {
+            name: "Disabled",
+        },
+        readOnly: {
+            name: "Read Only",
+        },
+        showColorInSelectArea: {
+            name: "Show Color in Select Area"
+        },
+        alignDropdown: {
+            name: "Align Dropdown",
+            options: ["left", "right"],
+            control: { type: "select" }
+        },
+        lightboxHeight: {
+            name: "light box Height",
+            options: ["large", "medium", "small"],
+            control: { type: "select" }
+        },
+        variant: {
+            name: "variant",
+            options: ["default", "ghost"],
+            control: { type: "select" }
+        },
+        dataOptions: {
+            name: "Data Options",
+            options: ["simple", "nested"],
+            control: { type: "select" }
+        }
+    },
+    args: {
+        // label: "This is a label",
+        // sublabel: "This is a sub label",
+        placeholder: "",
+        size: "Medium",
+        variant: "default",
+        selection: "single",
+        dataOptions: "simple",
+        isSearchable: false,
+        optionDescription: "India is the seventh-largest country by area and the second-most populous country in the world.",
+        // optionImage: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrVSkmNOQ6abMCc5e6R2r7VwRZDkBHFTyzAg&usqp=CAU",
+        optionIcon: undefined,
+        showIconInSelectArea: false,
+        colors: false,
+        showColorInSelectArea: false,
+        disabled: false,
+        readOnly: false,
+        popOutOfOverflowHiddenParent: false,
+        alignDropdown: "left",
+        isTagsStyle: false,
+        matchSelectInputWidth: false,
+        loading: false
+    }
+};
+var Dropdowns = function (args) {
+    var _a = (0, react_1.useState)({
+        single: undefined,
+        multi: undefined,
+    }), val = _a[0], setVal = _a[1];
+    var _b = (0, react_1.useState)([]), options = _b[0], setOptions = _b[1];
+    (0, react_1.useEffect)(function () {
+        var delayOptions = setTimeout(function () {
+            var newOptions = dropdownOptions_1.dropdownOptions.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, image: args.optionImage && [{ publicUrl: args.optionImage }], color: args.colors && op.color })); });
+            setOptions(newOptions);
+        }, 2000);
+        // Cleanup the timeout on component unmount
+        return function () { return clearTimeout(delayOptions); };
+    }, [args.optionDescription, args.optionImage, args.optionIcon, args.colors]);
+    var Comp = args.selection === "single" ? DropdownSingle_1.DropdownSingle : DropdownMulti_1.DropdownMulti;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Container_1.Container, null,
+            react_1.default.createElement(Paddings_1.PaddingTopBottom40, null,
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(Comp, __assign({ key: args.selection }, args, { S: args.size == "S", 
+                        // options={dropdownOptionsGroup}
+                        options: args.dataOptions === "simple"
+                            ?
+                                dropdownOptions_1.dropdownOptions.map(function (op) { return (__assign(__assign({}, op), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, 
+                                    // image: args.optionImage && [{ publicUrl: args.optionImage }],
+                                    color: args.colors && op.color, loading: args.loading })); })
+                            : dropdownOptions_1.dropdownOptionsGroup.map(function (op) { return (__assign(__assign({}, op), { options: op.options.map(function (option) { return (__assign(__assign({}, option), { desc: args.optionDescription, icon: !args.optionImage && args.optionIcon, 
+                                    // image: args.optionImage && [{ publicUrl: args.optionImage }],
+                                    color: args.colors && option.color, loading: args.loading })); }) })); }), value: val[args.selection], onChange: function (k, v) {
+                            return setVal(function (prev) {
+                                var _a;
+                                return (__assign(__assign({}, prev), (_a = {}, _a[args.selection] = v, _a)));
+                            });
+                        }, selectConfig: args.showIconInSelectArea ? ["display", "icon"] : args.showColorInSelectArea ? ["display", "color"] : ["display"], label: "Dropdown Component", sublabel: "Select single or multiple options in dropdown based on Selection Type", popOutOfOverflowHiddenParent: args.popOutOfOverflowHiddenParent, lightboxHeight: args.lightboxHeight, variant: args.variant, matchSelectInputWidth: args.matchSelectInputWidth })))),
+            react_1.default.createElement("div", { style: { height: '1000px', background: '#eee' } }))));
+};
+exports.Dropdowns = Dropdowns;

package/dist/stories/v2/components/Dropdown/dropdownOptions.d.ts

@@ -0,0 +1,15 @@
+export const dropdownOptions: {
+    display: string;
+    value: string;
+    color: string;
+}[];
+export const dropdownOptionsGroup: {
+    display: string;
+    value: string;
+    options: {
+        display: string;
+        value: string;
+        color: string;
+        desc: string;
+    }[];
+}[];

package/dist/stories/v2/components/Dropdown/dropdownOptions.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdownOptionsGroup = exports.dropdownOptions = void 0;
+var themes_1 = require("../../../../themes");
+exports.dropdownOptions = [
+    {
+        display: "Option with a slightly longer name",
+        value: "india",
+        color: themes_1.colors.lightRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Sri Lanka",
+        value: "sriLanka",
+        color: themes_1.colors.invertRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Japan",
+        value: "japan",
+        color: themes_1.colors.lightBlue
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Germany",
+        value: "germany",
+        color: themes_1.colors.primaryColor100
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "USA",
+        value: "usa",
+        color: themes_1.colors.greyColor100
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Columbia",
+        value: "columbia",
+        color: themes_1.colors.lightRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Brazil",
+        value: "brazil",
+        color: themes_1.colors.invertRed,
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+    {
+        display: "Australia",
+        value: "australia",
+        color: themes_1.colors.lightBlue
+        // image: "xyz",
+        // icon: "Trash",
+        // desc: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+    },
+];
+exports.dropdownOptionsGroup = [
+    {
+        display: "Asia",
+        value: "asia",
+        options: [
+            {
+                display: "India",
+                value: "india",
+                color: themes_1.colors.lightRed,
+                desc: "India is the seventh-largest country by area and the second-most populous country in the world.",
+            },
+            {
+                display: "Mumbai",
+                value: "mumbai",
+                desc: "Mumbai is India's financial center and largest city with a population of over 20 million people.",
+                color: themes_1.colors.lightBlue
+            }
+        ],
+    },
+    {
+        display: "East Asia",
+        value: "east_asia",
+        options: [
+            {
+                display: "Japan",
+                color: themes_1.colors.lightBlue,
+                value: "japan",
+                desc: "Japan is an island country in East Asia known for its traditional culture, advanced technology, and beautiful landscapes.",
+            },
+            {
+                display: "Tokyo",
+                value: "tokyo",
+                desc: "Tokyo is Japan's capital and the world's largest metropolitan economy with over 37 million residents.",
+                color: themes_1.colors.lightRed,
+            },
+            {
+                display: "Osaka",
+                value: "osaka",
+                desc: "Osaka is Japan's third-largest city, known for its modern architecture, nightlife, and hearty street food.",
+                color: themes_1.colors.invertRed,
+            }
+        ],
+    },
+    {
+        display: "South America",
+        value: "south_america",
+        options: [
+            {
+                display: "Brazil",
+                value: "brazil",
+                color: themes_1.colors.lightGreen,
+                desc: "Brazil is the largest country in South America and famous for its Amazon rainforest, vibrant culture, and football tradition.",
+            },
+            {
+                display: "Rio de Janeiro",
+                value: "rio",
+                desc: "Rio de Janeiro is a coastal Brazilian city famous for its Copacabana beach, Christ the Redeemer statue, and annual carnival.",
+                color: themes_1.colors.lightBlue
+            }
+        ],
+    },
+    {
+        display: "Oceania",
+        value: "oceania",
+        options: [
+            {
+                display: "Australia",
+                value: "australia",
+                color: themes_1.colors.lightYellow,
+                desc: "Australia is a country and continent surrounded by the Indian and Pacific oceans, known for its unique wildlife and diverse landscapes.",
+            },
+            {
+                display: "Sydney",
+                value: "sydney",
+                desc: "Sydney is Australia's largest city featuring the iconic Opera House, Harbour Bridge, and beautiful beaches like Bondi.",
+                color: themes_1.colors.greyColor100
+            },
+            {
+                display: "Melbourne",
+                value: "melbourne",
+                desc: "Melbourne is Australia's cultural capital known for its coffee culture, street art, and being consistently ranked among the world's most livable cities.",
+                color: themes_1.colors.lightBlue
+            }
+        ],
+    }
+];

package/dist/stories/v2/components/List.stories.d.ts

@@ -0,0 +1,96 @@
+declare namespace _default {
+    let title: string;
+    namespace parameters {
+        namespace docs {
+            namespace description {
+                let component: string;
+            }
+        }
+    }
+    namespace argTypes {
+        namespace isSearchable {
+            export let control: string;
+            let description_1: string;
+            export { description_1 as description };
+            export let defaultValue: boolean;
+        }
+        namespace grouped {
+            let control_1: string;
+            export { control_1 as control };
+            let description_2: string;
+            export { description_2 as description };
+            let defaultValue_1: boolean;
+            export { defaultValue_1 as defaultValue };
+        }
+        namespace isMulti {
+            let control_2: string;
+            export { control_2 as control };
+            let description_3: string;
+            export { description_3 as description };
+            let defaultValue_2: boolean;
+            export { defaultValue_2 as defaultValue };
+        }
+        namespace isTagsStyle {
+            let control_3: string;
+            export { control_3 as control };
+            let description_4: string;
+            export { description_4 as description };
+            let defaultValue_3: boolean;
+            export { defaultValue_3 as defaultValue };
+        }
+        namespace searchbarPlaceholder {
+            let control_4: string;
+            export { control_4 as control };
+            let description_5: string;
+            export { description_5 as description };
+            let defaultValue_4: string;
+            export { defaultValue_4 as defaultValue };
+        }
+        namespace disableShadow {
+            let control_5: string;
+            export { control_5 as control };
+            let description_6: string;
+            export { description_6 as description };
+            let defaultValue_5: boolean;
+            export { defaultValue_5 as defaultValue };
+        }
+        namespace enableBorder {
+            let control_6: string;
+            export { control_6 as control };
+            let description_7: string;
+            export { description_7 as description };
+            let defaultValue_6: boolean;
+            export { defaultValue_6 as defaultValue };
+        }
+    }
+}
+export default _default;
+export function List_(args: any): import("react").JSX.Element;
+export function ListItem_(args: any): import("react").JSX.Element;
+export namespace ListItem_ {
+    export namespace argTypes_1 {
+        namespace desc {
+            let name: string;
+        }
+        namespace icon {
+            let name_1: string;
+            export { name_1 as name };
+            export { availableIcons as options };
+            export namespace control_7 {
+                let type: string;
+            }
+            export { control_7 as control };
+        }
+    }
+    export { argTypes_1 as argTypes };
+    export namespace args {
+        export let display: string;
+        let desc_1: string;
+        export { desc_1 as desc };
+        let icon_1: string;
+        export { icon_1 as icon };
+        export let loading: boolean;
+        export let disabled: boolean;
+    }
+}
+declare const availableIcons: string[];