react-restyle-components 0.2.89 → 0.2.91

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

@@ -0,0 +1,108 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+const LI_ELEMENT_HEIGHT = 34;
+export const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
+    const [activeOption, setActiveOption] = useState(value === '' || options.indexOf(value) === -1 ? 0 : options.indexOf(value));
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [shouldShowList, setShouldShowList] = useState(false);
+    const [searchValue, setSearchValue] = useState(value);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const onInputChange = 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 = 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 = useCallback((event) => {
+        let selectedItem = '';
+        if (event.keyCode === 38) {
+            // arrow up
+            event.preventDefault();
+            if (activeOption === 0) {
+                return;
+            }
+            else {
+                selectedItem = filteredOptions[activeOption - 1];
+                setSearchValue(filteredOptions[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 = filteredOptions[activeOption + 1];
+                setSearchValue(filteredOptions[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 = () => {
+        return (_jsx(_Fragment, { children: shouldShowList ? (_jsx(_Fragment, { children: _jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: { zIndex: 999 }, children: filteredOptions?.length > 0 ? (_jsx("ul", { role: "list", className: cn(s['flex'], s['flex-col'], s['gap-1'], s['bg-gray-200'], s['w-full']), id: "list", ref: listRef, children: filteredOptions?.map((option, index) => {
+                            let className = cn(s['flex'], s['gap-2'], s['p-2']);
+                            if (index === activeOption) {
+                                className = cn(className, s['font-bold']);
+                            }
+                            return (_jsx("li", { className: className, role: "listitem", onClick: onOptionClick, children: option }, index));
+                        }) })) : (_jsx("div", { className: cn(s['flex'], s['bg-gray-200'], s['w-full'], s['p-2']), children: _jsx("span", { children: "Not Found Result!!" }) })) }) })) : (_jsx(_Fragment, {})) }));
+    };
+    useEffect(() => {
+        // this only works on click when inside timeout
+        setTimeout(() => {
+            inputRef.current?.select();
+        }, 0);
+        filteredOptions[0] && onValueChange(filteredOptions[0]);
+        // setShouldShowList(true);
+    }, []);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['flex-col'], s['relative']), children: [_jsx("div", { className: cn(s['flex'], s['leading-4'], s['p-2'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md']), children: _jsx("input", { type: "text", role: "input", name: "autocomplete-input", className: cn(s['flex'], s['focus:outline-none']), placeholder: "Search...", onChange: onInputChange, onKeyDown: onKeyDown, value: searchValue, ref: inputRef, onClick: () => {
+                            setShouldShowList(true);
+                        } }) }), _jsx("div", { className: cn(s['flex']), children: renderList() })] }) }));
+};

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

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=autocomplete.spec.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/autocomplete/autocomplete.spec.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Autocomplete } from './autocomplete';
+const TEST_OPTIONS = ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE'];
+test('Render Autocomplete', () => {
+    render(_jsx(Autocomplete, { value: "", onValueChange: () => { }, options: TEST_OPTIONS }));
+    expect(screen.getByRole('input')).toBeInTheDocument();
+    // expect(screen.getByRole('list')).toBeInTheDocument();
+});
+test('Autocomplete with empty list', () => {
+    render(_jsx(Autocomplete, { value: "", onValueChange: () => { }, options: [] }));
+    expect(screen.getByRole('input')).toBeInTheDocument();
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+});
+test('Autocomplete list arrow navigation', () => {
+    const onValueChange = jest.fn();
+    window.HTMLElement.prototype.scroll = function () { };
+    render(_jsx(Autocomplete, { value: "", onValueChange: onValueChange, options: TEST_OPTIONS }));
+    expect(onValueChange).toHaveBeenCalledWith('ONE');
+    fireEvent.keyDown(screen.getByRole('input'), { keyCode: 40 }); //down
+    expect(onValueChange).toHaveBeenCalledWith('TWO');
+    // expect(screen.getByText('TWO')).toHaveClass('active-option');
+    // expect(screen.getByText('THREE')).toBeInTheDocument();
+    fireEvent.keyDown(screen.getByRole('input'), { keyCode: 40 }); //down
+    expect(onValueChange).toHaveBeenCalledWith('THREE');
+    // expect(screen.getByText('THREE')).toHaveClass('active-option');
+});
+// test('Autocomplete list option click', () => {
+//   const onValueChange = jest.fn();
+//   render(
+//     <Autocomplete
+//       value=""
+//       onValueChange={onValueChange}
+//       options={TEST_OPTIONS}
+//     />
+//   );
+//   fireEvent.click(screen.getByText('FOUR'));
+//   expect(screen.getByRole('input')).toHaveValue('FOUR');
+//   expect(onValueChange).toHaveBeenCalledWith('FOUR');
+//   expect(screen.queryByRole('list')).not.toBeInTheDocument();
+// });
+test('Autocomplete search', () => {
+    const onValueChange = jest.fn();
+    render(_jsx(Autocomplete, { value: "", onValueChange: onValueChange, options: TEST_OPTIONS }));
+    fireEvent.change(screen.getByRole('input'), { target: { value: 'f' } });
+    for (let option of TEST_OPTIONS) {
+        if (option.toLowerCase().indexOf('f') > -1) {
+            expect(screen.getAllByRole('listitem')).toHaveLength(2);
+            expect(screen.queryByText(option)).toBeInTheDocument();
+        }
+        else {
+            expect(screen.queryByText(option)).not.toBeInTheDocument();
+        }
+    }
+});
+// test('Autocomplete search default value', () => {
+//   const onValueChange = jest.fn();
+//   render(
+//     <Autocomplete
+//       value="TWO"
+//       onValueChange={onValueChange}
+//       options={TEST_OPTIONS}
+//     />
+//   );
+//   expect(screen.getByText('TWO')).toHaveClass('active-option');
+// });
+test('Autocomplete search no result', () => {
+    const onValueChange = jest.fn();
+    render(_jsx(Autocomplete, { value: "", onValueChange: onValueChange, options: TEST_OPTIONS }));
+    fireEvent.change(screen.getByRole('input'), { target: { value: 'hello' } });
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+    // expect(screen.getByText('No match')).toBeInTheDocument();
+});
+test('Autocomplete with value not in list', () => {
+    render(_jsx(Autocomplete, { value: "xxx", onValueChange: () => { }, options: TEST_OPTIONS }));
+    expect(screen.getByRole('input')).toBeInTheDocument();
+    // expect(screen.getByText('ONE')).toHaveClass('active-option');
+});

package/lib/src/core-components/src/molecules/color-picker/color-picker.component.d.ts

@@ -0,0 +1,6 @@
+import './color-picker.css';
+export declare const ColorPicker: ({ color, onChange }: {
+    color: any;
+    onChange: any;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-picker.component.d.ts.map

package/lib/src/core-components/src/molecules/color-picker/color-picker.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/color-picker/color-picker.component.tsx"],"names":[],"mappings":"AAGA,OAAO,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW;;;6CAqBvB,CAAC"}

package/lib/src/core-components/src/molecules/color-picker/color-picker.component.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { useClickOutside } from '../../hooks';
+import './color-picker.css';
+export const ColorPicker = ({ color, onChange }) => {
+    const popover = useRef();
+    const [isOpen, toggle] = useState(false);
+    const close = useCallback(() => toggle(false), []);
+    useClickOutside(popover, close);
+    return (_jsxs("div", { className: "picker", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => toggle(true) }), isOpen && (_jsx("div", { className: "popover", ref: popover, children: _jsx(HexColorPicker, { color: color, onChange: onChange }) }))] }));
+};

package/lib/src/core-components/src/molecules/color-picker/color-picker.css

@@ -0,0 +1,24 @@
+.picker {
+  position: relative;
+  z-index: 999;
+}
+
+.swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: 3px solid #fff;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  border-radius: 9px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  z-index: 999;
+}

package/lib/src/core-components/src/molecules/color-picker/color-picker.spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=color-picker.spec.d.ts.map

package/lib/src/core-components/src/molecules/color-picker/color-picker.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/color-picker/color-picker.spec.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/lib/src/core-components/src/molecules/color-picker/color-picker.spec.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ColorPicker } from './color-picker.component';
+test('Render Autocomplete', () => {
+    render(_jsx(ColorPicker, { color: "#000000", onChange: () => { } }));
+});

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.component.d.ts

@@ -0,0 +1,15 @@
+import './color-picker-modal.css';
+import '../../tc.module.css';
+interface ColorPickerModalProps {
+    color: string;
+    isVisible?: boolean;
+    testId?: string;
+    tooltip?: string;
+    tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
+    onChange: (color: string) => void;
+    onNoFill?: (bgColor: string, textColor: string) => void;
+    onClose?: (color?: string) => void;
+}
+export declare const ColorPickerModal: ({ color, isVisible, testId, tooltip, tooltipSide, onChange, onNoFill, onClose, }: ColorPickerModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=color-picker-modal.component.d.ts.map

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-modal.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/color-picker-modal/color-picker-modal.component.tsx"],"names":[],"mappings":"AASA,OAAO,0BAA0B,CAAC;AAClC,OAAO,qBAAqB,CAAC;AAE7B,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAClD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,gBAAgB,qFAS1B,qBAAqB,4CAwGvB,CAAC"}

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.component.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef, useState, useEffect } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { useClickOutside } from '../../hooks';
+import { TooltipProvider, Tooltip } from '../../atoms/tooltip/tooltip.component';
+import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR, STANDARD_COLORS, } from '../../helpers/constants';
+import './color-picker-modal.css';
+import '../../tc.module.css';
+export const ColorPickerModal = ({ color, isVisible = false, testId = 'color-picker', tooltip = '', tooltipSide = 'bottom', onChange, onNoFill, onClose, }) => {
+    const popover = useRef();
+    const [currentColor, setCurrentColor] = useState(color);
+    const [isOpen, toggle] = useState(isVisible);
+    const close = useCallback(() => {
+        if (isOpen) {
+            toggle(false);
+            onClose && onClose(currentColor);
+        }
+    }, [isOpen, onClose, currentColor]);
+    useClickOutside(popover, close);
+    useEffect(() => {
+        if (!isOpen) {
+            setCurrentColor(color || DEFAULT_BG_COLOR);
+        }
+    }, [color, isOpen]);
+    const handleColorChange = useCallback((color) => {
+        setCurrentColor(color);
+        onChange(color);
+    }, [onChange]);
+    const handleStandardColorClick = useCallback((color) => {
+        setCurrentColor(color);
+        onChange(color);
+        close();
+    }, [onChange, close]);
+    const handleNoFillClick = useCallback(() => {
+        onNoFill && onNoFill(DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR);
+        setCurrentColor(DEFAULT_BG_COLOR);
+        onChange(DEFAULT_BG_COLOR);
+        close();
+    }, [onNoFill, onChange, close]);
+    return (_jsxs("div", { className: "picker-modal", "data-testid": testId, children: [_jsx(TooltipProvider, { children: _jsx(Tooltip, { content: tooltip, className: 'text-white bg-black p-2', side: tooltipSide, children: _jsx("div", { "data-testid": "swatch", className: `${currentColor !== '' ? 'swatch-modal' : 'swatch-modal diagonal-line'} z-10`, style: { backgroundColor: currentColor }, onClick: () => toggle(true) }) }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center items-center  overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none ", children: _jsx("div", { className: "relative w-auto h-auto mx-auto my-auto bg-white rounded-md", children: _jsx("div", { className: "border-0 rounded-lg  relative flex flex-col w-full outline-none focus:outline-none", children: _jsxs("div", { className: "flex flex-col  w-full gap-4 justify-center items-center p-4 rounded-lg shadow-lg z-99 color-picker-modal", ref: popover, children: [_jsx(HexColorPicker, { "data-testid": "colorPicker", color: currentColor, onChange: handleColorChange }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("span", { className: "font-serif", children: "Standard Colors" }), _jsx("div", { className: "flex gap-2 mt-2", children: STANDARD_COLORS?.map((color) => (_jsx("div", { className: "rounded-full w-8 h-8 cursor-pointer gap-2", style: { backgroundColor: color }, onClick: () => handleStandardColorClick(color), "data-testid": `standard-color-${color}` }, color))) })] }), _jsx("div", { className: "flex justify-center bg-blue-600 mt-2 rounded-md p-2 mx-8 text-white hover:bg-blue-800 transition duration-300 ease-in-out hover:shadow-lg cursor-pointer", onClick: handleNoFillClick, "data-testid": "no-fill", children: _jsx("span", { className: "font-serif", children: "No Fill" }) })] }) }) }) }), _jsx("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })] }))] }));
+};

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.css

@@ -0,0 +1,45 @@
+.picker-modal {
+  position: relative;
+}
+
+.swatch-modal {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: 3px solid #fff;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+.diagonal-line {
+  background-color: transparent;
+  background-image: gradient(
+    linear,
+    19.1% -7.9%,
+    81% 107.9%,
+    color-stop(0, transparent),
+    color-stop(0.48, transparent),
+    color-stop(0.5, #000),
+    color-stop(0.52, transparent),
+    color-stop(1, transparent)
+  );
+  background-image: repeating-linear-gradient(
+    130deg,
+    transparent 0%,
+    transparent 48%,
+    #000 50%,
+    transparent 52%,
+    transparent 100%
+  );
+}
+
+.popover-modal {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  border-radius: 9px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+  z-index: 999;
+}

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=color-picker-modal.spec.d.ts.map

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-modal.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/color-picker-modal/color-picker-modal.spec.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.spec.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ColorPickerModal } from './color-picker-modal.component';
+test('Render Autocomplete', () => {
+    render(_jsx(ColorPickerModal, { color: "#000000", onChange: () => { } }));
+});

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

@@ -0,0 +1,11 @@
+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) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=css-multiline-input.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css-multiline-input.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;CACtB;AAWD,eAAO,MAAM,YAAY,sEAOtB,iBAAiB,4CA8HnB,CAAC"}

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import * as Form from '../../atoms/form/form.component';
+import { properties as propertiesObj } from './css-properties';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+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(propertiesObj);
+export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "Like fontSize: 12,backgroundColor:'#000000',", onChange, }) => {
+    const value = useRef('');
+    const [properties, setProperties] = useState([]);
+    const [isListOpen, setIsListOpen] = useState(false);
+    useEffect(() => {
+        value.current = defaultValue;
+        setProperties(data);
+    }, [defaultValue]);
+    const useOutsideAlerter = (ref) => {
+        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 = 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 (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['w-full']), ref: wrapperRef, children: [_jsx(Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: cn(className), onKeyUp: onKeyUp, onChange: (css) => {
+                    value.current = css;
+                    filter(css);
+                } }), isListOpen && (_jsx("div", { style: { marginTop: -10 }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['max-h-40'], s['bg-black'], s['m-2'], s['text-white'], s['overflow-y-scroll']), children: properties?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['flex-col'], s['gap-4'], s['p-2']), children: [_jsx("span", { className: cn(s['underline']), children: item[0] }), item[1]?.map((prop) => (_jsxs("li", { className: cn(s['flex'], s['-mt-2'], s['px-2'], s['h-8'], s['bg-slate-800'], s['rounded-md'], s['items-center'], s['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(''));
+                                }, children: [' ', prop, ' '] })))] }, index))) }) }))] }));
+};