oolib 2.176.5 → 2.177.1

package/dist/icons/index.d.ts

@@ -121,6 +121,7 @@ export namespace icons {
     export { CirclesFour };
     export { ArrowLineDown };
     export { PaperPlaneTilt };
+    export { NotePencil };
     export { OkeGoogleIcon };
     export { LetterH };
     export { IndexIcon };
@@ -307,6 +308,7 @@ import { ArrowsVertical } from 'phosphor-react';
 import { CirclesFour } from 'phosphor-react';
 import { ArrowLineDown } from 'phosphor-react';
 import { PaperPlaneTilt } from 'phosphor-react';
+import { NotePencil } from 'phosphor-react';
 import { OkeGoogleIcon } from "./custom";
 import { LetterH } from "./custom";
 import { IndexIcon } from "./custom";

package/dist/icons/index.js

@@ -126,6 +126,7 @@ exports.icons = {
     CirclesFour: phosphor_react_1.CirclesFour,
     ArrowLineDown: phosphor_react_1.ArrowLineDown,
     PaperPlaneTilt: phosphor_react_1.PaperPlaneTilt,
+    NotePencil: phosphor_react_1.NotePencil,
     //custom icons
     OkeGoogleIcon: custom_1.OkeGoogleIcon,
     LetterH: custom_1.LetterH,

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

@@ -0,0 +1,121 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace placeholder {
+            let name: string;
+        }
+        namespace optionIcon {
+            export { availableIcons as options };
+            export namespace control {
+                let type: string;
+            }
+        }
+        namespace selection {
+            let name_1: string;
+            export { name_1 as name };
+            export let options: string[];
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace size {
+            let name_2: string;
+            export { name_2 as name };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+            let options_1: string[];
+            export { options_1 as options };
+            export namespace mapping {
+                let Small: string;
+                let Medium: string;
+            }
+        }
+        namespace isSearchable {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        namespace showIconInSelectArea {
+            let name_4: string;
+            export { name_4 as name };
+        }
+        namespace optionImage {
+            let name_5: string;
+            export { name_5 as name };
+        }
+        namespace optionDescription {
+            let name_6: string;
+            export { name_6 as name };
+        }
+        namespace colors {
+            let name_7: string;
+            export { name_7 as name };
+        }
+        namespace disabled {
+            let name_8: string;
+            export { name_8 as name };
+        }
+        namespace readOnly {
+            let name_9: string;
+            export { name_9 as name };
+        }
+        namespace invert {
+            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 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_3 as control };
+        }
+    }
+    namespace args {
+        let placeholder_1: string;
+        export { placeholder_1 as placeholder };
+        let size_1: string;
+        export { size_1 as size };
+        let selection_1: string;
+        export { selection_1 as selection };
+        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;
+        export { showIconInSelectArea_1 as showIconInSelectArea };
+        let colors_1: boolean;
+        export { colors_1 as colors };
+        let showColorInSelectArea_1: boolean;
+        export { showColorInSelectArea_1 as showColorInSelectArea };
+        let disabled_1: boolean;
+        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 default _default;
+export function Dropdowns(args: any): React.JSX.Element;
+declare const availableIcons: string[];
+import React from "react";

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

@@ -0,0 +1,289 @@
+"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 themes_1 = require("../../../themes");
+var icons_1 = require("../../../icons");
+var DropdownMulti_1 = require("../../../v2/components/Dropdowns/DropdownMulti");
+var DropdownSingle_1 = require("../../../v2/components/Dropdowns/DropdownSingle");
+// import { faker } from '@faker-js/faker';
+// const generateRandomCountry = () => ({
+//   display: faker.address.country(),
+//   value: faker.address.countryCode().toLowerCase(),
+// });
+// const generateDropdownOptions = (length) => {
+//   const dropdownOptions = [];
+//   for (let i = 0; i < length; i++) {
+//     dropdownOptions.push(generateRandomCountry());
+//   }
+//   return dropdownOptions;
+// };
+// const dropdownOptions2 = generateDropdownOptions(200);
+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",
+        },
+        invert: {
+            name: "Invert",
+        },
+        showColorInSelectArea: {
+            name: "Show Color in Select Area"
+        },
+        alignDropdown: {
+            name: "Align Dropdown",
+            options: ["left", "right"],
+            control: { type: "select" }
+        },
+    },
+    args: {
+        // label: "This is a label",
+        // sublabel: "This is a sub label",
+        placeholder: "",
+        size: "Medium",
+        selection: "single",
+        isSearchable: false,
+        optionDescription: "This is a story about schnil-tu, a.k.a tubito senpai. Tubito senpai loves to say bhai-god. Lol.",
+        optionImage: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrVSkmNOQ6abMCc5e6R2r7VwRZDkBHFTyzAg&usqp=CAU",
+        optionIcon: undefined,
+        showIconInSelectArea: false,
+        colors: false,
+        showColorInSelectArea: false,
+        disabled: false,
+        readOnly: false,
+        invert: false,
+        popOutOfOverflowHiddenParent: false,
+        alignDropdown: "left",
+    }
+};
+var 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.",
+    },
+];
+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.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", { style: { background: args.invert && themes_1.colors.greyColor100 } },
+        react_1.default.createElement(Container_1.Container, null,
+            react_1.default.createElement(Paddings_1.PaddingTopBottom40, null,
+                react_1.default.createElement(Comp, __assign({ key: args.selection }, args, { S: args.size == "S", options: 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 })); }), 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 }))),
+            react_1.default.createElement("div", { style: { height: '1000px', background: 'red' } }))));
+};
+exports.Dropdowns = Dropdowns;
+// export const Button_Primary = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonPrimary} />
+// )
+// Button_Primary.parameters = { controls: { exclude: ['variant', 'color'] } }
+// export const Button_Secondary = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonSecondary} />
+// )
+// Button_Secondary.parameters = { controls: { exclude: ['variant', 'color'] } }
+// Button_Secondary.args = {
+//   active: false,
+// }
+// export const Button_Ghost = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonGhost} />
+// )
+// Button_Ghost.args = {
+//   active: false,
+// }
+// Button_Ghost.parameters = { controls: { exclude: ['variant'] } }
+// export const Button_Custom = (args) => (
+//   <GenButtonStory args={args} Comp={ButtonCustom} />
+// )
+// Button_Custom.parameters = { controls: { exclude: ['variant', 'color'] } }
+// export const Google_Login = (args) => (
+//   <GenButtonStory args={args} Comp={GoogleLogin} />
+// )
+// Google_Login.parameters = {
+//   controls: { exclude: ['variant', 'color', 'iconOnly', 'icon + text'] },
+// }
+// export const Upload_Button = (args) => (
+//   <GenButtonStory args={{ ...args, children: 'Upload' }} Comp={UploadButton} />
+// )
+// Upload_Button.parameters = { controls: { exclude: ['color'] } }

package/dist/utils/useStyleUpdateAfterToggleTransition.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyleUpdateAfterToggleTransition: ({ styleOptions, initStyle: _initStyle, toggleState, transitionDuration }: {
+    styleOptions: any;
+    initStyle: any;
+    toggleState: any;
+    transitionDuration: any;
+}) => {
+    style: any;
+};

package/dist/utils/useStyleUpdateAfterToggleTransition.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyleUpdateAfterToggleTransition = void 0;
+var react_1 = require("react");
+var useStyleUpdateAfterToggleTransition = function (_a) {
+    var styleOptions = _a.styleOptions, // ['hidden', 'visible']
+    _initStyle = _a.initStyle, //hidden
+    toggleState = _a.toggleState, //isExpanded
+    transitionDuration = _a.transitionDuration //300
+    ;
+    var initStyle = (0, react_1.useRef)(_initStyle);
+    //helps to make the accordionOverflow visible once its open,
+    //for scenarios where a data viz tooltip needs to stick out
+    var _b = (0, react_1.useState)(initStyle.current), style = _b[0], setStyle = _b[1];
+    (0, react_1.useEffect)(function () {
+        var timeoutId;
+        if (toggleState) {
+            // Set timeout for making content visible after animation
+            timeoutId = setTimeout(function () {
+                // Double check if still expanded before setting to visible
+                if (toggleState) {
+                    setStyle(styleOptions.find(function (op) { return op !== initStyle.current; }));
+                }
+            }, transitionDuration);
+        }
+        else {
+            // Immediately set to hidden when closing
+            setStyle(initStyle.current);
+        }
+        // Cleanup function to clear timeout if component updates/unmounts
+        return function () {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [toggleState, transitionDuration]);
+    return ({
+        style: style
+    });
+};
+exports.useStyleUpdateAfterToggleTransition = useStyleUpdateAfterToggleTransition;

package/dist/v2/components/Accordion/index.js

@@ -48,6 +48,7 @@ var ActionMenu_1 = require("../../../components/ActionMenu");
 var phosphor_react_1 = require("phosphor-react");
 var mixins_1 = require("../../../themes/mixins");
 var Typo2_1 = require("../Typo2");
+var useStyleUpdateAfterToggleTransition_1 = require("../../../utils/useStyleUpdateAfterToggleTransition");
 var StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 0.8rem;\n  border: 1px solid ", ";\n  background: #ffffff;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);\n"], ["\n  border-radius: 0.8rem;\n  border: 1px solid ", ";\n  background: #ffffff;\n  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);\n"])), colors_1.colors.grey10);
 var StyledHeader = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  padding: 1rem 1.6rem;\n  text-align: left;\n  background: none;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
 var StyledRightHeaderSection = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
@@ -104,31 +105,12 @@ var Accordion = function (_a) {
     var _d = (0, react_1.useState)(defaultExpanded), isExpanded = _d[0], setIsExpanded = _d[1];
     var _e = useCalculateWrapperHeight({ isExpanded: isExpanded }), wrapperRef = _e.wrapperRef, wrapperHeight = _e.wrapperHeight;
     var expandAnimationDuration = 300;
-    //helps to make the accordionOverflow visible once its open,
-    //for scenarios where a data viz tooltip needs to stick out
-    var _f = (0, react_1.useState)("hidden"), accordionOverflow = _f[0], setAccordionOverflow = _f[1];
-    (0, react_1.useEffect)(function () {
-        var timeoutId;
-        if (isExpanded) {
-            // Set timeout for making content visible after animation
-            timeoutId = setTimeout(function () {
-                // Double check if still expanded before setting to visible
-                if (isExpanded) {
-                    setAccordionOverflow("visible");
-                }
-            }, expandAnimationDuration);
-        }
-        else {
-            // Immediately set to hidden when closing
-            setAccordionOverflow("hidden");
-        }
-        // Cleanup function to clear timeout if component updates/unmounts
-        return function () {
-            if (timeoutId) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [isExpanded, expandAnimationDuration]);
+    var accordionOverflow = (0, useStyleUpdateAfterToggleTransition_1.useStyleUpdateAfterToggleTransition)({
+        styleOptions: ['hidden', 'visible'],
+        initStyle: 'hidden',
+        toggleState: isExpanded,
+        transitionDuration: expandAnimationDuration
+    }).style;
     return (react_1.default.createElement(StyledContainer, null,
         react_1.default.createElement(StyledHeader, { onClick: function () { return setIsExpanded(!isExpanded); } },
             react_1.default.createElement("div", { style: { flex: "1 0 0" } },

package/dist/v2/components/Dropdowns/DropdownMulti/index.d.ts

@@ -0,0 +1,38 @@
+export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, invert, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, S, disabled, broadcastShowOptions, tagColor, searchbarPlaceholder, alignDropdown }: {
+    saveValueAsString: any;
+    value: any;
+    id: any;
+    onChange: any;
+    className: any;
+    readOnly: any;
+    invert: any;
+    selectClassName: any;
+    optionsClassName: any;
+    selectStyleOverride: any;
+    optionsFn: any;
+    options: any;
+    isTagsStyle: any;
+    isSearchable: any;
+    searchFieldsConfig: any;
+    setFilteredOptions: any;
+    setSearchString: any;
+    searchString: any;
+    label: any;
+    optionsModalLabel: any;
+    genCreateTagButton: any;
+    placeholder: any;
+    genCustomSelectComp: any;
+    disableSelectTextUpdate: any;
+    selectConfig: any;
+    lightboxHeight: any;
+    lightboxStyle: any;
+    optionsAnchor: any;
+    popOutOfOverflowHiddenParent: any;
+    S: any;
+    disabled: any;
+    broadcastShowOptions: any;
+    tagColor: any;
+    searchbarPlaceholder: any;
+    alignDropdown?: string;
+}, ...args: any[]): React.JSX.Element;
+import React from "react";