react-restyle-components 0.1.84 → 0.1.86

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

@@ -0,0 +1,119 @@
+"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.AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = void 0;
+/* eslint-disable  */
+const react_1 = __importStar(require("react"));
+const __1 = require("../..");
+require("../../../tc.css");
+const AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = ({ uniqueField = '_id', loader = false, placeholder = 'Search...', data, hasError = false, disable = false, isUpperCase = false, name, onFilter, onUpdate, onSelect, onBlur, }) => {
+    const [value, setValue] = (0, react_1.useState)('');
+    const [options, setOptions] = (0, react_1.useState)();
+    const [originalOptions, setOriginalOptions] = (0, react_1.useState)();
+    const [isListOpen, setIsListOpen] = (0, react_1.useState)(false);
+    const useOutsideAlerter = (ref) => {
+        (0, react_1.useEffect)(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    if (originalOptions && options) {
+                        if (isListOpen) {
+                            onUpdate && onUpdate(data.selected);
+                        }
+                    }
+                    setIsListOpen(false);
+                    setValue('');
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    const wrapperRef = (0, react_1.useRef)(null);
+    useOutsideAlerter(wrapperRef);
+    let count = 0;
+    const getSelectedItem = (selectedItem, list) => {
+        if (count === 0) {
+            const finalList = list?.filter((item, index) => {
+                item.selected = false;
+                selectedItem && selectedItem.length > 0
+                    ? selectedItem.find((sItem, index) => {
+                        if (sItem[uniqueField] === item[uniqueField]) {
+                            item.selected = true;
+                        }
+                    })
+                    : (item.selected = false);
+                count++;
+                return item;
+            });
+            list = finalList;
+        }
+        return list;
+    };
+    (0, react_1.useEffect)(() => {
+        setOriginalOptions(getSelectedItem(data.selected, data.list));
+        setOptions(getSelectedItem(data.selected, data.list));
+    }, [data, data.selected]);
+    const onChange = (e) => {
+        const search = e.target.value;
+        setValue(search);
+        onFilter && onFilter(search);
+    };
+    const onKeyUp = (e) => {
+        const charCode = e.which ? e.which : e.keyCode;
+        if (charCode === 8) {
+            const search = e.target.value;
+            onFilter && onFilter(search);
+        }
+    };
+    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 focus:outline-none focus:ring  w-full shadow-sm sm:text-base border-2 ${hasError ? 'border-red' : 'border-gray-300'} rounded-md` },
+                react_1.default.createElement("input", { placeholder: placeholder, disabled: disable, name: name, value: !isListOpen
+                        ? `${(data.selected && data.selected.length) || 0} Items`
+                        : isUpperCase
+                            ? value?.toUpperCase()
+                            : value, className: `w-full focus:outline-none bg-none`, onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), onBlur: (e) => onBlur && onBlur(e) }),
+                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 bg-gray-100 p-2 rounded-sm z-500", style: { zIndex: 80 } },
+                    react_1.default.createElement("ul", null, options?.map((item, index) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("li", { key: index, className: "text-gray-400 flex items-center" },
+                            react_1.default.createElement("input", { type: "checkbox", checked: item.selected, onChange: () => onSelect(item) }),
+                            ' ',
+                            react_1.default.createElement("label", { className: "ml-2 mt-1 text-black" }, data.displayKey
+                                .map((key) => `${item[key]}
+                              `)
+                                .join(' - ')))))))))
+                : null)));
+};
+exports.AutoCompleteFilterMultipleSelectMultipleFieldsDisplay = AutoCompleteFilterMultipleSelectMultipleFieldsDisplay;

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

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

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

@@ -0,0 +1,14 @@
+"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 _core_utils_1 = require("@core-utils");
+const auto_complete_filter_multiple_select_multiple_fields_display_component_1 = require("./auto-complete-filter-multiple-select-multiple-fields-display.component");
+it('render AutoCompleteFilterMultipleSelectMultipleFieldsDisplay correctly', () => {
+    const autoCompleteFilterMultipleSelectMultipleFieldsDisplay = (0, _core_utils_1.render)(react_1.default.createElement(auto_complete_filter_multiple_select_multiple_fields_display_component_1.AutoCompleteFilterMultipleSelectMultipleFieldsDisplay, { data: [], onUpdate: (item) => {
+            console.log({ item });
+        }, onSelect: (item) => { } }));
+    expect(autoCompleteFilterMultipleSelectMultipleFieldsDisplay).toMatchSnapshot();
+});

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AutoCompleteFilterMultipleSelectMultipleFieldsDisplay } from './auto-complete-filter-multiple-select-multiple-fields-display.component';
+declare const meta: Meta<typeof AutoCompleteFilterMultipleSelectMultipleFieldsDisplay>;
+export default meta;
+type Story = StoryObj<typeof AutoCompleteFilterMultipleSelectMultipleFieldsDisplay>;
+export declare const Primary: Story;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const auto_complete_filter_multiple_select_multiple_fields_display_component_1 = require("./auto-complete-filter-multiple-select-multiple-fields-display.component");
+const meta = {
+    title: 'Design System/Molecules/AutoCompleteFilterMultipleSelectMultipleFieldsDisplay',
+    component: auto_complete_filter_multiple_select_multiple_fields_display_component_1.AutoCompleteFilterMultipleSelectMultipleFieldsDisplay,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { AutoCompleteFilterMultipleSelectMultipleFieldsDisplay } from 'react-restyle-components'`,
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        data: {
+            list: [
+                {
+                    _id: '66532a99bbfed4eea86eae23',
+                    code: 82,
+                    description: 'TEST1',
+                    libraryCode: 'ABCD',
+                },
+                {
+                    _id: '6652b6d8bcef7f713cb547d4',
+                    code: 81,
+                    description: 'TEST New',
+                    libraryCode: 'TEST',
+                },
+            ],
+            selected: [
+                {
+                    _id: '66532a99bbfed4eea86eae23',
+                    code: 82,
+                    description: 'TEST1',
+                    libraryCode: 'ABCD',
+                },
+            ],
+            displayKey: ['libraryCode', 'description'],
+        },
+        onUpdate: (item) => {
+            console.log({ item });
+        },
+        onSelect: (item) => {
+            console.log({ item });
+        },
+    },
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import '../../../tc.css';
+interface AutoCompleteFilterSingleSelectMultiFieldsDisplayProps {
+    loader?: boolean;
+    disable?: boolean;
+    displayValue?: string;
+    placeholder?: string;
+    data: any;
+    hasError?: boolean;
+    className?: string;
+    posstion?: 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, onFilter, onSelect, onBlur, }: AutoCompleteFilterSingleSelectMultiFieldsDisplayProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,120 @@
+"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.AutoCompleteFilterSingleSelectMultiFieldsDisplay = void 0;
+/* eslint-disable  */
+const react_1 = __importStar(require("react"));
+const __1 = require("../..");
+require("../../../tc.css");
+const AutoCompleteFilterSingleSelectMultiFieldsDisplay = ({ disable = false, loader = false, displayValue = '', placeholder = 'Search...', data, hasError = false, className, posstion = 'absolute', onFilter, onSelect, onBlur, }) => {
+    const [value, setValue] = (0, react_1.useState)(displayValue);
+    const [options, setOptions] = (0, react_1.useState)(data.list);
+    const [isListOpen, setIsListOpen] = (0, react_1.useState)(false);
+    const [filterValue, setFilterValue] = (0, react_1.useState)();
+    const useOutsideAlerter = (ref) => {
+        (0, react_1.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 = (0, react_1.useRef)(null);
+    useOutsideAlerter(wrapperRef);
+    (0, react_1.useEffect)(() => {
+        setOptions(data.list);
+    }, [data]);
+    (0, react_1.useEffect)(() => {
+        setValue(displayValue);
+    }, [displayValue]);
+    const onChange = (e) => {
+        const search = e.target.value?.toUpperCase();
+        setValue(search);
+        setFilterValue(search);
+        onFilter && onFilter(search);
+    };
+    const onKeyUp = (e) => {
+        const charCode = e.which ? e.which : e.keyCode;
+        if (charCode === 8) {
+            const search = e.target.value;
+            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);
+                }
+            }
+        }
+    };
+    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 focus:outline-none focus:ring  w-full shadow-sm sm:text-base border-2 ${hasError ? 'border-red' : 'border-gray-300'} rounded-md dark:text-black` },
+                react_1.default.createElement("input", { placeholder: placeholder, value: value, className: `${className} w-full focus:outline-none bg-none dark:text-black`, onKeyUp: onKeyUp, onChange: onChange, onClick: () => setIsListOpen(true), disabled: disable, onMouseDown: () => setValue(''), onBlur: (e) => onBlur && onBlur(e), onKeyDown: onKeyDown }),
+                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  w-full bg-gray-100 p-2 rounded-sm `, style: {
+                        zIndex: 500,
+                    } },
+                    react_1.default.createElement("ul", null, options?.map((item, index) => (react_1.default.createElement("li", { key: index, className: "text-gray-400 flex items-center", onClick: () => {
+                            setValue(data.displayKey
+                                .map((key) => `${item[key]}`)
+                                .join(' - '));
+                            setIsListOpen(false);
+                            onSelect && onSelect(item);
+                        } },
+                        ' ',
+                        react_1.default.createElement("label", { className: "ml-2 mt-1 text-black", style: {
+                                textOverflow: 'ellipsis',
+                                minWidth: 0,
+                                overflow: 'hidden',
+                                maxWidth: '334px',
+                                whiteSpace: 'nowrap',
+                            }, title: data.displayKey
+                                .map((key) => item[key])
+                                .join(' - ') }, data.displayKey
+                            .map((key) => `${item[key]}
+                              `)
+                            .join(' - '))))))))
+                : null)));
+};
+exports.AutoCompleteFilterSingleSelectMultiFieldsDisplay = AutoCompleteFilterSingleSelectMultiFieldsDisplay;

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

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

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

@@ -0,0 +1,21 @@
+"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_filter_single_select_multiple_fields_display_component_1 = require("./auto-complete-filter-single-select-multiple-fields-display.component");
+describe('AutoCompleteFilterSingleSelectMultiFieldsDisplay component', () => {
+    it('render autoCompleteFilterSingleSelectMultiFieldsDisplay correctly', () => {
+        const autoCompleteFilterSingleSelectMultiFieldsDisplay = (0, react_2.render)(react_1.default.createElement(auto_complete_filter_single_select_multiple_fields_display_component_1.AutoCompleteFilterSingleSelectMultiFieldsDisplay, { data: {
+                list: [
+                    { code: 'Lims', name: 'plus' },
+                    { code: 'Lims', name: 'plus' },
+                    { code: 'Lims', name: 'plus' },
+                ],
+                displayKey: ['name'],
+            }, onSelect: () => jest.fn(), onFilter: () => jest.fn() }));
+        expect(autoCompleteFilterSingleSelectMultiFieldsDisplay).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AutoCompleteFilterSingleSelectMultiFieldsDisplay } from './auto-complete-filter-single-select-multiple-fields-display.component';
+declare const meta: Meta<typeof AutoCompleteFilterSingleSelectMultiFieldsDisplay>;
+export default meta;
+type Story = StoryObj<typeof AutoCompleteFilterSingleSelectMultiFieldsDisplay>;
+export declare const Primary: Story;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const auto_complete_filter_single_select_multiple_fields_display_component_1 = require("./auto-complete-filter-single-select-multiple-fields-display.component");
+const meta = {
+    title: 'Design System/Molecules/AutoCompleteFilterSingleSelectMultiFieldsDisplay',
+    component: auto_complete_filter_single_select_multiple_fields_display_component_1.AutoCompleteFilterSingleSelectMultiFieldsDisplay,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { AutoCompleteFilterSingleSelectMultiFieldsDisplay } from 'react-restyle-components'`,
+        // backgrounds: {
+        //   default: 'light-gray',
+        // },
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        data: {
+            list: [
+                { code: 'Code1', name: 'Value1' },
+                { code: 'Code2', name: 'Value2' },
+                { code: 'Code3', name: 'Value3' },
+            ],
+            displayKey: ['name'],
+        },
+        onSelect: (item) => {
+            console.log({ item });
+        },
+    },
+};

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,144 @@
+"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 }),
+        renderList()));
+};
+exports.Autocomplete = Autocomplete;

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,20 @@
+"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

@@ -0,0 +1,12 @@
+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 {};