react-restyle-components 0.1.90 → 0.1.92

package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.js

@@ -1,166 +0,0 @@
-"use strict";
-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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AutocompleteGroupBy = void 0;
-/* eslint-disable  */
-const react_1 = __importStar(require("react"));
-const __1 = require("../..");
-const AutocompleteGroupBy = (props) => {
-    //const [userRouter, setUserRouter] = useState<any>()
-    const [value, setValue] = (0, react_1.useState)(props.displayValue);
-    const [options, setOptions] = (0, react_1.useState)();
-    const [isListOpen, setIsListOpen] = (0, react_1.useState)(false);
-    const useOutsideAlerter = (ref) => {
-        (0, react_1.useEffect)(() => {
-            /**
-             * Alert if clicked on outside of element
-             */
-            function handleClickOutside(event) {
-                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
-                    setIsListOpen(false);
-                    setValue('');
-                }
-            }
-            // Bind the event listener
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                // Unbind the event listener on clean up
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }, [ref, isListOpen]);
-    };
-    const wrapperRef = (0, react_1.useRef)(null);
-    useOutsideAlerter(wrapperRef);
-    (0, react_1.useEffect)(() => {
-        setValue(props.displayValue);
-    }, [props.displayValue]);
-    (0, react_1.useEffect)(() => {
-        setOptions(props.data || []);
-    }, [props]);
-    const uniqByKeepFirst = (a, key) => {
-        const seen = new Set();
-        return a.filter((item) => {
-            const k = key(item);
-            return seen.has(k) ? false : seen.add(k);
-        });
-    };
-    const filter = (search, data) => {
-        if (search !== '') {
-            let filterArray = [];
-            data.filter((item) => {
-                item.children.filter((children) => {
-                    const childrenItem = children.title &&
-                        children.title.toLowerCase().indexOf(search.toLowerCase()) > -1;
-                    if (childrenItem) {
-                        const isSameArray = filterArray.filter((filterItem, index) => {
-                            if (filterItem.name === item.name) {
-                                const newChildren = filterArray[index].children.concat(children);
-                                filterArray[index] = {
-                                    ...filterArray[index],
-                                    children: newChildren,
-                                };
-                            }
-                        });
-                        if (isSameArray.length < 1) {
-                            filterArray.push({ ...item, children: [children] });
-                        }
-                        const uniqueChars = uniqByKeepFirst(filterArray, (it) => it.name);
-                        filterArray = uniqueChars;
-                    }
-                });
-            });
-            setOptions(filterArray);
-        }
-        else {
-            setOptions(data);
-        }
-    };
-    const onChange = (e) => {
-        const search = e.target.value;
-        setValue(search);
-        filter(search, props.data);
-    };
-    // const onKeyUp = e => {
-    //   const charCode = e.which ? e.which : e.keyCode;
-    //   if (charCode === 8) {
-    //     const search = e.target.value;
-    //     filter(search, data);
-    //   }
-    // };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { ref: wrapperRef, className: "w-full relative" },
-            react_1.default.createElement("div", { className: `flex items-center leading-4 p-2 bg-white focus:outline-none focus:ring  w-full shadow-sm sm:text-base border-2  ${props.hasError ? 'border-red ' : 'border-gray-300'} rounded-md` },
-                react_1.default.createElement("input", { placeholder: "Search...", value: !isListOpen ? value : value, className: "w-full focus:outline-none", 
-                    // onKeyUp={onKeyUp}
-                    onChange: onChange, onClick: () => setIsListOpen(true), onKeyDown: (e) => {
-                        if (e.key === 'Enter') {
-                            e.preventDefault();
-                            // Find the selected item and children
-                            let selectedItem = null;
-                            let selectedChildren = null;
-                            for (const item of options) {
-                                for (const children of item.children) {
-                                    if (children.title.toLowerCase() === value.toLowerCase() ||
-                                        item.title.toLowerCase() === value.toLowerCase()) {
-                                        selectedItem = item;
-                                        selectedChildren = children;
-                                        break;
-                                    }
-                                }
-                                if (selectedItem) {
-                                    break;
-                                }
-                            }
-                            // Call props.onChange with the selected item and children
-                            if (props.onChange && selectedItem && selectedChildren) {
-                                props.onChange(selectedItem, selectedChildren);
-                            }
-                            setIsListOpen(false);
-                            setValue(value); // Set the value to what the user entered
-                            setOptions([]);
-                        }
-                    } }),
-                isListOpen ? (react_1.default.createElement(__1.Icon, { nameIcon: "FaChevronUp", propsIcon: {
-                        color: '#000000',
-                        size: 22,
-                    } })) : (react_1.default.createElement(__1.Icon, { nameIcon: "FaChevronDown", propsIcon: {
-                        color: '#000000',
-                        size: 22,
-                    } }))),
-            options && isListOpen
-                ? options?.length > 0 && (react_1.default.createElement("div", { className: "mt-1 absolute z-50 border-gray-500 rounded-md bg-gray-200 w-100" },
-                    react_1.default.createElement("ul", { className: "p-2 rounded-sm" },
-                        react_1.default.createElement("div", { className: "", style: { height: 'auto', maxHeight: '350px' } }, options?.map((item, index) => (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement("li", { key: index, className: "text-gray-400" }, item.title),
-                            react_1.default.createElement("ul", { className: "ml-4" }, item?.children?.map((children, childrenIndex) => (react_1.default.createElement("li", { key: childrenIndex, className: "hover:bg-gray-200 focus:outline-none cursor-pointer", onClick: async () => {
-                                    props.onChange &&
-                                        props.onChange(item, children);
-                                    setIsListOpen(false);
-                                    setValue(children.title);
-                                    setOptions([]);
-                                } }, children.title)))))))))))
-                : null)));
-};
-exports.AutocompleteGroupBy = AutocompleteGroupBy;

package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.test.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
-const auto_complete_group_by_component_1 = require("./auto-complete-group-by.component");
-describe('AutocompleteGroupBy component', () => {
-    it('render autocompleteGroupBy correctly', () => {
-        const autocompleteGroupBy = (0, react_2.render)(react_1.default.createElement(auto_complete_group_by_component_1.AutocompleteGroupBy, { data: [] }));
-        expect(autocompleteGroupBy).toMatchSnapshot();
-    });
-});

package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { AutocompleteGroupBy } from './auto-complete-group-by.component';
-declare const meta: Meta<typeof AutocompleteGroupBy>;
-export default meta;
-type Story = StoryObj<typeof AutocompleteGroupBy>;
-export declare const Primary: Story;

package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.stories.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Primary = void 0;
-const auto_complete_group_by_component_1 = require("./auto-complete-group-by.component");
-const meta = {
-    title: 'Design System/Molecules/AutocompleteGroupBy',
-    component: auto_complete_group_by_component_1.AutocompleteGroupBy,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { AutocompleteGroupBy } from 'react-restyle-components'`,
-        // backgrounds: {
-        //   default: 'light-gray',
-        // },
-    },
-};
-exports.default = meta;
-exports.Primary = {
-    args: {
-        data: [
-            {
-                title: 'Country',
-                code: 'C',
-                children: [
-                    { title: 'India', code: 'I' },
-                    { title: 'United States', code: 'US' },
-                ],
-            },
-            {
-                title: 'Social Media',
-                code: 'C',
-                children: [
-                    { title: 'Facebook', code: 'F' },
-                    { title: 'Instagram', code: 'I' },
-                ],
-            },
-        ],
-        hasError: true,
-        onChange: () => { },
-        onClose: () => { },
-    },
-};

package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import './autocomplete.css';
-interface AutocompleteProps {
-    value: string;
-    onValueChange: (value: string) => void;
-    options?: string[];
-}
-export declare const Autocomplete: ({ value, onValueChange, options, }: AutocompleteProps) => React.JSX.Element;
-export {};

package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.js

@@ -1,146 +0,0 @@
-"use strict";
-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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
-const react_1 = __importStar(require("react"));
-require("./autocomplete.css");
-const LI_ELEMENT_HEIGHT = 34;
-const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
-    const [activeOption, setActiveOption] = (0, react_1.useState)(value === '' || options.indexOf(value) === -1 ? 0 : options.indexOf(value));
-    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
-    const [shouldShowList, setShouldShowList] = (0, react_1.useState)(false);
-    const [searchValue, setSearchValue] = (0, react_1.useState)(value);
-    const inputRef = (0, react_1.useRef)(null);
-    const listRef = (0, react_1.useRef)(null);
-    const onInputChange = (0, react_1.useCallback)((event) => {
-        const input = event.target.value;
-        if (input != '') {
-            const newFilteredOptions = options.filter((option) => option.toLowerCase().indexOf(input.toLowerCase()) > -1);
-            setFilteredOptions(newFilteredOptions);
-        }
-        else {
-            setFilteredOptions(options);
-        }
-        setActiveOption(0);
-        setShouldShowList(true);
-        setSearchValue(input);
-    }, [
-        setActiveOption,
-        setFilteredOptions,
-        setShouldShowList,
-        setSearchValue,
-        onValueChange,
-    ]);
-    const onOptionClick = (0, react_1.useCallback)((event) => {
-        const symbol = event.currentTarget.innerText || event.currentTarget.textContent || '';
-        setShouldShowList(false);
-        setActiveOption(0);
-        setFilteredOptions([]);
-        setSearchValue(symbol);
-        onValueChange(symbol);
-    }, [
-        setShouldShowList,
-        setActiveOption,
-        setFilteredOptions,
-        setSearchValue,
-        onValueChange,
-    ]);
-    const onKeyDown = (0, react_1.useCallback)((event) => {
-        let selectedItem = '';
-        if (event.keyCode === 38) {
-            // arrow up
-            event.preventDefault();
-            if (activeOption === 0) {
-                return;
-            }
-            else {
-                selectedItem = options[activeOption - 1];
-                setSearchValue(options[activeOption - 1]);
-                setActiveOption(activeOption - 1);
-                listRef.current?.scroll({
-                    top: LI_ELEMENT_HEIGHT * (activeOption - 1),
-                });
-            }
-        }
-        else if (event.keyCode === 40) {
-            // arrow down
-            event.preventDefault();
-            if (activeOption === filteredOptions.length - 1) {
-                return;
-            }
-            else {
-                selectedItem = options[activeOption + 1];
-                setSearchValue(options[activeOption + 1]);
-                setActiveOption(activeOption + 1);
-                listRef.current?.scroll({
-                    top: LI_ELEMENT_HEIGHT * (activeOption + 1),
-                });
-            }
-        }
-        if (Object.keys(selectedItem)?.length > 0) {
-            onValueChange(selectedItem);
-        }
-    }, [
-        setActiveOption,
-        setSearchValue,
-        filteredOptions,
-        activeOption,
-        onValueChange,
-    ]);
-    const renderList = () => {
-        if (!options.length) {
-            return react_1.default.createElement(react_1.default.Fragment, null);
-        }
-        if (shouldShowList) {
-            if (filteredOptions.length) {
-                return (react_1.default.createElement("ul", { role: "list", className: "autocomplete-list", id: "list", ref: listRef }, filteredOptions?.map((option, index) => {
-                    let className = '';
-                    if (index === activeOption) {
-                        className = 'active-option';
-                    }
-                    return (react_1.default.createElement("li", { className: className, role: "listitem", key: index, onClick: onOptionClick }, option));
-                })));
-            }
-            else {
-                return react_1.default.createElement("div", { className: "no-options" }, "No match");
-            }
-        }
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    };
-    (0, react_1.useEffect)(() => {
-        // this only works on click when inside timeout
-        setTimeout(() => {
-            inputRef.current?.select();
-        }, 0);
-        options[0] && onValueChange(options[0]);
-        // setShouldShowList(true);
-    }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", { type: "text", role: "input", name: "autocomplete-input", onChange: onInputChange, onKeyDown: onKeyDown, value: searchValue, ref: inputRef, onClick: () => {
-                setShouldShowList(true);
-            } }),
-        renderList()));
-};
-exports.Autocomplete = Autocomplete;

package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.spec.js

@@ -1,72 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
-require("@testing-library/jest-dom");
-const autocomplete_1 = require("./autocomplete");
-const TEST_OPTIONS = ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE'];
-test('Render Autocomplete', () => {
-    (0, react_2.render)(react_1.default.createElement(autocomplete_1.Autocomplete, { value: "", onValueChange: () => { }, options: TEST_OPTIONS }));
-    expect(react_2.screen.getByRole('input')).toBeInTheDocument();
-    expect(react_2.screen.getByRole('list')).toBeInTheDocument();
-});
-test('Autocomplete with empty list', () => {
-    (0, react_2.render)(react_1.default.createElement(autocomplete_1.Autocomplete, { value: "", onValueChange: () => { }, options: [] }));
-    expect(react_2.screen.getByRole('input')).toBeInTheDocument();
-    expect(react_2.screen.queryByRole('list')).not.toBeInTheDocument();
-});
-test('Autocomplete list arrow navigation', () => {
-    const onValueChange = jest.fn();
-    window.HTMLElement.prototype.scroll = function () { };
-    (0, react_2.render)(react_1.default.createElement(autocomplete_1.Autocomplete, { value: "", onValueChange: onValueChange, options: TEST_OPTIONS }));
-    expect(onValueChange).toHaveBeenCalledWith('ONE');
-    react_2.fireEvent.keyDown(react_2.screen.getByRole('input'), { keyCode: 40 }); //down
-    expect(onValueChange).toHaveBeenCalledWith('TWO');
-    expect(react_2.screen.getByText('TWO')).toHaveClass('active-option');
-    expect(react_2.screen.getByText('THREE')).toBeInTheDocument();
-    react_2.fireEvent.keyDown(react_2.screen.getByRole('input'), { keyCode: 40 }); //down
-    expect(onValueChange).toHaveBeenCalledWith('THREE');
-    expect(react_2.screen.getByText('THREE')).toHaveClass('active-option');
-});
-test('Autocomplete list option click', () => {
-    const onValueChange = jest.fn();
-    (0, react_2.render)(react_1.default.createElement(autocomplete_1.Autocomplete, { value: "", onValueChange: onValueChange, options: TEST_OPTIONS }));
-    react_2.fireEvent.click(react_2.screen.getByText('FOUR'));
-    expect(react_2.screen.getByRole('input')).toHaveValue('FOUR');
-    expect(onValueChange).toHaveBeenCalledWith('FOUR');
-    expect(react_2.screen.queryByRole('list')).not.toBeInTheDocument();
-});
-test('Autocomplete search', () => {
-    const onValueChange = jest.fn();
-    (0, react_2.render)(react_1.default.createElement(autocomplete_1.Autocomplete, { value: "", onValueChange: onValueChange, options: TEST_OPTIONS }));
-    react_2.fireEvent.change(react_2.screen.getByRole('input'), { target: { value: 'f' } });
-    for (let option of TEST_OPTIONS) {
-        if (option.toLowerCase().indexOf('f') > -1) {
-            expect(react_2.screen.getAllByRole('listitem')).toHaveLength(2);
-            expect(react_2.screen.queryByText(option)).toBeInTheDocument();
-        }
-        else {
-            expect(react_2.screen.queryByText(option)).not.toBeInTheDocument();
-        }
-    }
-});
-test('Autocomplete search default value', () => {
-    const onValueChange = jest.fn();
-    (0, react_2.render)(react_1.default.createElement(autocomplete_1.Autocomplete, { value: "TWO", onValueChange: onValueChange, options: TEST_OPTIONS }));
-    expect(react_2.screen.getByText('TWO')).toHaveClass('active-option');
-});
-test('Autocomplete search no result', () => {
-    const onValueChange = jest.fn();
-    (0, react_2.render)(react_1.default.createElement(autocomplete_1.Autocomplete, { value: "", onValueChange: onValueChange, options: TEST_OPTIONS }));
-    react_2.fireEvent.change(react_2.screen.getByRole('input'), { target: { value: 'hello' } });
-    expect(react_2.screen.queryByRole('list')).not.toBeInTheDocument();
-    expect(react_2.screen.getByText('No match')).toBeInTheDocument();
-});
-test('Autocomplete with value not in list', () => {
-    (0, react_2.render)(react_1.default.createElement(autocomplete_1.Autocomplete, { value: "xxx", onValueChange: () => { }, options: TEST_OPTIONS }));
-    expect(react_2.screen.getByRole('input')).toBeInTheDocument();
-    expect(react_2.screen.getByText('ONE')).toHaveClass('active-option');
-});

package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Autocomplete } from './autocomplete';
-declare const meta: Meta<typeof Autocomplete>;
-export default meta;
-type Story = StoryObj<typeof Autocomplete>;
-export declare const Primary: Story;

package/lib/cjs/src/core-components/molecules/autocomplete/autocomplete.stories.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Primary = void 0;
-const autocomplete_1 = require("./autocomplete");
-const meta = {
-    title: 'Design System/Molecules/Autocomplete',
-    component: autocomplete_1.Autocomplete,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { Autocomplete } from 'react-restyle-components'`,
-    },
-};
-exports.default = meta;
-exports.Primary = {
-    args: {
-        value: '',
-        onValueChange: () => { },
-        options: ['One', 'Two', 'Three', 'Four'],
-    },
-};

package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.component.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import '../../../tc.css';
-interface CSSMultilineProps {
-    label?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    className?: string;
-    style?: any;
-    onChange(item: any): void;
-}
-export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, }: CSSMultilineProps) => React.JSX.Element;
-export {};

package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.component.js

@@ -1,124 +0,0 @@
-"use strict";
-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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CSSMultiline = void 0;
-const react_1 = __importStar(require("react"));
-const __1 = require("../..");
-const css_properties_1 = require("./css-properties");
-require("../../../tc.css");
-const mapToArray = (arr) => {
-    const res = [];
-    arr.forEach(function (obj, index) {
-        const key = Object.keys(obj)[0];
-        const value = key;
-        res.push([value, obj[key]]);
-    });
-    return res;
-};
-const data = mapToArray(css_properties_1.properties);
-const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "Like fontSize: 12,backgroundColor:'#000000',", onChange, }) => {
-    const value = (0, react_1.useRef)('');
-    const [properties, setProperties] = (0, react_1.useState)([]);
-    const [isListOpen, setIsListOpen] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        value.current = defaultValue;
-        setProperties(data);
-    }, [defaultValue]);
-    const useOutsideAlerter = (ref) => {
-        (0, react_1.useEffect)(() => {
-            function handleClickOutside(event) {
-                if (ref.current && !ref.current.contains(event.target)) {
-                    setIsListOpen(false);
-                    onChange(value.current);
-                }
-            }
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => {
-                document.removeEventListener('mousedown', handleClickOutside);
-            };
-        }, [ref]);
-    };
-    const wrapperRef = (0, react_1.useRef)(null);
-    useOutsideAlerter(wrapperRef);
-    const list = [];
-    const filter = (css) => {
-        let matchString = css?.split(',');
-        matchString = matchString[matchString?.length - 1];
-        matchString = matchString?.split(':')[0];
-        matchString = matchString?.split("'")[0];
-        if (css?.length == 0)
-            return setProperties(data);
-        else {
-            data?.map((item) => {
-                const innerItem = [];
-                const isItems = item[0]?.startsWith(matchString);
-                if (isItems)
-                    innerItem.push(item[0]);
-                if (innerItem?.length > 0)
-                    list.push([item[0], item[1]]);
-            });
-            setProperties(list);
-        }
-    };
-    const onKeyUp = (e) => {
-        setIsListOpen(true);
-    };
-    return (react_1.default.createElement("div", { className: "flex flex-col w-full", ref: wrapperRef },
-        react_1.default.createElement(__1.Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: className, onKeyUp: onKeyUp, onChange: (css) => {
-                value.current = css;
-                filter(css);
-            } }),
-        isListOpen && (react_1.default.createElement("div", { style: { marginTop: -10 } },
-            react_1.default.createElement("ul", { className: "flex flex-col max-h-40 bg-black  m-2 text-white  overflow-y-scroll  " }, properties?.map((item, index) => (react_1.default.createElement("li", { key: index, className: "flex flex-col gap-4 p-2" },
-                react_1.default.createElement("span", { className: "underline" }, item[0]),
-                item[1]?.map((prop) => (react_1.default.createElement("li", { className: "flex -mt-2 px-2 h-8 bg-slate-800  rounded-md items-center cursor-pointer", onClick: () => {
-                        let existsString = value.current?.split(',');
-                        if (value.current.includes(',')) {
-                            existsString = existsString.map((item) => {
-                                if (item?.includes(':'))
-                                    return item;
-                            });
-                            if (prop != 'number')
-                                existsString.push(`${item[0]}:'${prop}',`);
-                            else
-                                existsString.push(`${item[0]}:1,`);
-                            value.current = existsString
-                                .join(',')
-                                .replaceAll(',,', ',');
-                        }
-                        else {
-                            if (prop != 'number')
-                                value.current = `${item[0]}:'${prop}',`;
-                            else {
-                                value.current = `${item[0]}:1,`;
-                            }
-                        }
-                        filter(existsString.join(''));
-                    } },
-                    ' ',
-                    prop,
-                    ' ')))))))))));
-};
-exports.CSSMultiline = CSSMultiline;

package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { CSSMultiline } from './css-multiline-input.component';
-declare const meta: Meta<typeof CSSMultiline>;
-export default meta;
-type Story = StoryObj<typeof CSSMultiline>;
-export declare const Primary: Story;

package/lib/cjs/src/core-components/molecules/css-multiline-input/css-multiline-input.stories.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Primary = void 0;
-const css_multiline_input_component_1 = require("./css-multiline-input.component");
-const meta = {
-    title: 'Design System/Molecules/CSSMultiline',
-    component: css_multiline_input_component_1.CSSMultiline,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { CSSMultiline } from 'react-restyle-components'`,
-    },
-};
-exports.default = meta;
-exports.Primary = {
-    args: {},
-};