react-restyle-components 0.2.89 → 0.2.90

package/lib/src/core-components/src/molecules/auto-complete-filter-single-select/auto-complete-filter-single-select.component.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable  */
+import { useState, useEffect, useRef } from 'react';
+import { Icon } from '../../atoms/icons/icons.component';
+import { debounce } from '@techabl/core-utils';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+export const AutoCompleteFilterSingleSelect = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, onFilter, onSelect, }) => {
+    const [value, setValue] = useState(displayValue);
+    const [options, setOptions] = useState();
+    const [isListOpen, setIsListOpen] = useState(false);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    setIsListOpen(false);
+                    setValue('');
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    useEffect(() => {
+        setOptions(data.list);
+    }, [data]);
+    useEffect(() => {
+        setValue(displayValue);
+    }, [displayValue]);
+    const handleInputChange = (e) => {
+        const search = e.target.value;
+        setValue(search);
+        const filteredOptions = data.list.filter((item) => item[data.displayKey].toLowerCase().includes(search.toLowerCase()));
+        setOptions(filteredOptions);
+        debounce(() => {
+            onFilter(search);
+        });
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], 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'], {
+                        [s['border-red']]: hasError,
+                        [s['border-gray-300']]: !hasError,
+                    }), children: [_jsx("input", { placeholder: placeholder, value: !isListOpen ? value : value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none']), onChange: handleInputChange, onClick: () => setIsListOpen(true), disabled: disable }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+                                color: '#000000',
+                                size: 22,
+                            } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
+                                color: '#000000',
+                                size: 22,
+                            } }))] }), options && isListOpen
+                    ? options.length > 0 && (_jsx("div", { className: cn(s['mt-1'], s['absolute'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['z-50']), children: _jsx("ul", { children: options?.map((item, index) => (_jsx(_Fragment, { children: _jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
+                                        setValue(item[data.displayKey]);
+                                        setIsListOpen(false);
+                                        onSelect(item);
+                                    }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), children: item[data.displayKey] }) }, index) }))) }) }))
+                    : null] }) }));
+};

package/lib/src/core-components/src/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts

@@ -0,0 +1,18 @@
+import '../../../tc.module.css';
+interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
+    loader?: boolean;
+    disable?: boolean;
+    displayValue?: string;
+    placeholder?: string;
+    data: any;
+    hasError?: boolean;
+    className?: string;
+    posstion?: string;
+    keyboard?: string;
+    onFilter?: (item: any) => void;
+    onSelect?: (item: any) => any;
+    onBlur?: (item: any) => any;
+}
+export declare const AutoCompleteFilterSingleSelectMultiFieldsDisplay: ({ disable, loader, displayValue, placeholder, data, hasError, className, posstion, keyboard, onFilter, onSelect, onBlur, }: AutoCompleteFilterSingleSelectMultiFieldsDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=auto-complete-filter-single-select-multiple-fields-display.component.d.ts.map

package/lib/src/core-components/src/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-filter-single-select-multiple-fields-display.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.tsx"],"names":[],"mappings":"AAIA,OAAO,wBAAwB,CAAC;AAKhC,UAAU,qDAAqD;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC7B;AAED,eAAO,MAAM,gDAAgD,+HAa1D,qDAAqD,4CAiNvD,CAAC"}

package/lib/src/core-components/src/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.component.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable  */
+import { useState, useEffect, useRef } from 'react';
+import { Icon } from '../../atoms/icons/icons.component';
+import '../../../tc.module.css';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+import { debounce } from '@techabl/core-utils';
+export const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', keyboard = 'text', onFilter, onSelect, onBlur, }) => {
+    const [value, setValue] = useState(displayValue);
+    const [options, setOptions] = useState(data.list);
+    const [isListOpen, setIsListOpen] = useState(false);
+    const [filterValue, setFilterValue] = useState();
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    setIsListOpen(false);
+                    //setValue('');
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    useEffect(() => {
+        setOptions(data.list);
+    }, [data]);
+    useEffect(() => {
+        setValue(displayValue);
+    }, [displayValue]);
+    const onChange = (e) => {
+        const search = e.target.value;
+        setValue(search);
+        setFilterValue(search);
+        const filteredOptions = data.list.filter((item) => data.displayKey.some((key) => item[key]?.toString().toLowerCase().includes(search.toLowerCase())));
+        setOptions(filteredOptions);
+        debounce(() => {
+            onFilter && onFilter(search);
+        });
+    };
+    const onKeyUp = (e) => {
+        const charCode = e.which ? e.which : e.keyCode;
+        if (charCode === 8) {
+            const search = e.target.value;
+            debounce(() => {
+                onFilter && onFilter(search);
+            });
+        }
+    };
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === 'Tab') {
+            if (options.length > 0) {
+                const selectedItem = options.find((item) => item.labId === Number(value));
+                if (selectedItem) {
+                    setValue(data.displayKey.map((key) => `${selectedItem[key]}`).join(' - '));
+                    setIsListOpen(false);
+                    onSelect && onSelect(selectedItem);
+                }
+            }
+        }
+    };
+    const calculateMaxHeight = () => {
+        if (inputRef.current) {
+            const inputRect = inputRef.current.getBoundingClientRect();
+            const availableHeight = window.innerHeight - inputRect.bottom - 20; // 10px padding
+            return availableHeight;
+        }
+        return 'calc(100vh - 140px)';
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: "w-full relative", children: [_jsxs("div", { className: cn(s['flex'], s['p-2'], s['leading-4'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
+                        [s['border-red']]: hasError,
+                        [s['border-gray-300']]: !hasError,
+                        [s['dark:text-black']]: true,
+                    }), children: [_jsx("input", { ref: inputRef, placeholder: placeholder, type: keyboard, value: value, className: cn(s['w-full'], s['focus:outline-none'], s['bg-none'], s['dark:text-black'], className), onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+                                color: '#000000',
+                                size: 22,
+                            } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
+                                color: '#000000',
+                                size: 22,
+                            } }))] }), options && isListOpen
+                    ? options.length > 0 && (_jsx("div", { className: cn(s['absolute'], s['w-full'], s['bg-gray-100'], s['p-2'], s['rounded-sm'], s['overflow-y-auto']), style: {
+                            zIndex: 500,
+                            maxHeight: `${calculateMaxHeight()}px`,
+                        }, children: _jsx("ul", { children: options?.map((item, index) => (_jsx("li", { className: cn(s['text-gray-400'], s['flex'], s['items-center']), onClick: () => {
+                                    setValue(data.displayKey
+                                        .map((key) => item[key])
+                                        .filter((value) => value !== null && value !== undefined)
+                                        .join(' - '));
+                                    setIsListOpen(false);
+                                    onSelect && onSelect(item);
+                                }, children: _jsx("label", { className: cn(s['ml-2'], s['mt-1'], s['text-black']), style: {
+                                        textOverflow: 'ellipsis',
+                                        minWidth: 0,
+                                        overflow: 'hidden',
+                                        whiteSpace: 'nowrap',
+                                    }, title: data.displayKey
+                                        .map((key) => item[key])
+                                        .join(' - '), children: data.displayKey
+                                        .map((key) => item[key])
+                                        .filter((value) => value !== null && value !== undefined)
+                                        .join(' - ') }) }, index))) }) }))
+                    : null] }) }));
+};

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

@@ -0,0 +1,10 @@
+interface AutocompleteGroupByProps {
+    data: any[];
+    hasError?: boolean;
+    displayValue?: string;
+    onChange?: (item: any, children: any) => void;
+    onClose?: () => void;
+}
+export declare const AutocompleteGroupBy: ({ data, hasError, displayValue, onChange, onClose, }: AutocompleteGroupByProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=auto-complete-group-by.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-group-by.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.tsx"],"names":[],"mappings":"AAMA,UAAU,wBAAwB;IAChC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,yDAM7B,wBAAwB,4CAiP1B,CAAC"}

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

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable  */
+import { useState, useEffect, useRef } from 'react';
+import { Icon } from '../../atoms/icons/icons.component';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+export const AutocompleteGroupBy = ({ data = [], hasError = false, displayValue = '', onChange, onClose, }) => {
+    //const [userRouter, setUserRouter] = useState<any>()
+    const [value, setValue] = useState(displayValue);
+    const [options, setOptions] = useState();
+    const [isListOpen, setIsListOpen] = useState(false);
+    const useOutsideAlerter = (ref) => {
+        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 = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    useEffect(() => {
+        setValue(displayValue);
+    }, [displayValue]);
+    useEffect(() => {
+        setOptions(data || []);
+    }, [data]);
+    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 onChangeValue = (e) => {
+        const search = e.target.value;
+        setValue(search);
+        filter(search, data);
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: wrapperRef, className: s['w-full'] + ' ' + s['relative'], children: [_jsxs("div", { className: cn(s['flex'], s['items-center'], s['leading-4'], s['p-2'], s['bg-white'], s['focus:outline-none'], s['focus:ring'], s['w-full'], s['shadow-sm'], s['sm:text-base'], s['border'], s['rounded-md'], {
+                        [s['border-red']]: hasError,
+                        [s['border-gray-300']]: !hasError,
+                    }), children: [_jsx("input", { placeholder: "Search...", value: !isListOpen ? value : value, className: cn(s['w-full'] + ' ' + s['focus:outline-none']), 
+                            // onKeyUp={onKeyUp}
+                            onChange: onChangeValue, 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 (onChange && selectedItem && selectedChildren) {
+                                        onChange(selectedItem, selectedChildren);
+                                    }
+                                    setIsListOpen(false);
+                                    setValue(value); // Set the value to what the user entered
+                                    setOptions([]);
+                                }
+                            } }), isListOpen ? (_jsx(Icon, { nameIcon: "FaChevronUp", propsIcon: {
+                                color: '#000000',
+                                size: 22,
+                            } })) : (_jsx(Icon, { nameIcon: "FaChevronDown", propsIcon: {
+                                color: '#000000',
+                                size: 22,
+                            } }))] }), options && isListOpen
+                    ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['mt-1'], s['absolute'], s['z-50'], s['rounded-md'], s['bg-gray-200'], s['w-100'], s['w-full']), children: _jsx("ul", { className: cn(s['flex'], s['p-2'], s['rounded-sm'], s['w-full']), children: _jsx("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['overflow-scroll']), style: { height: 'auto', maxHeight: '350px' }, children: options?.map((item, index) => (_jsxs(_Fragment, { children: [_jsx("li", { className: cn(s['flex'] + ' ' + s['text-gray-400']), children: item.title }, index), _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['ml-4'], s['w-full']), children: item?.children?.map((children, childrenIndex) => (_jsx("li", { className: cn(s['flex'], s['hover:bg-gray-200'], s['focus:outline-none'], s['cursor-pointer'], s['w-full']), onClick: async () => {
+                                                    onChange && onChange(item, children);
+                                                    setIsListOpen(false);
+                                                    setValue(children.title);
+                                                    setOptions([]);
+                                                }, children: children.title }, childrenIndex))) })] }))) }) }) }))
+                    : null] }) }));
+};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=auto-complete-group-by.component.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"auto-complete-group-by.component.test.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/auto-complete-group-by/auto-complete-group-by.component.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { AutocompleteGroupBy } from './auto-complete-group-by.component';
+describe('AutocompleteGroupBy component', () => {
+    it('render autocompleteGroupBy correctly', () => {
+        const autocompleteGroupBy = render(_jsx(AutocompleteGroupBy, { data: [] }));
+        expect(autocompleteGroupBy).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,8 @@
+interface AutocompleteProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    options?: string[];
+}
+export declare const Autocomplete: ({ value, onValueChange, options, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=autocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAMA,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,uCAItB,iBAAiB,4CAgNnB,CAAC"}

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.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"}