react-restyle-components 0.1.86 → 0.1.88

package/lib/cjs/src/App.js

@@ -8,8 +8,17 @@ require("./App.css");
 const core_components_1 = require("./core-components");
 function App() {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement("div", null,
-            react_1.default.createElement("p", null, "New testing"),
-            react_1.default.createElement(core_components_1.Autocomplete, { value: "", onValueChange: () => { }, options: ['One', 'Two'] }))));
+        react_1.default.createElement("p", { style: { margin: '0 0 10px 0' } }, "Autocomplete Comp."),
+        react_1.default.createElement(core_components_1.Autocomplete, { value: "", onValueChange: () => { }, options: ['One', 'Two', 'Three', 'Four', 'Five', 'Six'] }),
+        react_1.default.createElement(core_components_1.AutocompleteGroupBy, { data: [
+                {
+                    title: 'Country',
+                    code: 'C',
+                    children: [
+                        { title: 'India', code: 'I' },
+                        { title: 'United States', code: 'US' },
+                    ],
+                },
+            ] })));
 }
 exports.default = App;

package/lib/cjs/src/__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/src/core-components/index.d.ts

@@ -21,4 +21,5 @@ export * from './molecules/multi-select/multi-select.component';
 export * from './molecules/multi-select-with-field/multi-select-with-field.component';
 export * from './molecules/modal-confirm/modal-confirm.component';
 export * from './molecules/autocomplete/autocomplete';
+export * from './molecules/auto-complete-group-by/auto-complete-group-by.component';
 export { Form };

package/lib/cjs/src/core-components/index.js

@@ -51,3 +51,4 @@ __exportStar(require("./molecules/multi-select/multi-select.component"), exports
 __exportStar(require("./molecules/multi-select-with-field/multi-select-with-field.component"), exports);
 __exportStar(require("./molecules/modal-confirm/modal-confirm.component"), exports);
 __exportStar(require("./molecules/autocomplete/autocomplete"), exports);
+__exportStar(require("./molecules/auto-complete-group-by/auto-complete-group-by.component"), exports);

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface AutocompleteGroupByProps {
+    data: any[];
+    onChange?: (item: any, children: any) => void;
+    hasError?: boolean;
+    displayValue?: string;
+    onClose?: () => void;
+}
+export declare const AutocompleteGroupBy: (props: AutocompleteGroupByProps) => React.JSX.Element;
+export {};

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

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

package/lib/cjs/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.test.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 react_2 = require("@testing-library/react");
+const auto_complete_group_by_component_1 = require("./auto-complete-group-by.component");
+describe('AutocompleteGroupBy component', () => {
+    it('render autocompleteGroupBy correctly', () => {
+        const autocompleteGroupBy = (0, react_2.render)(react_1.default.createElement(auto_complete_group_by_component_1.AutocompleteGroupBy, { data: [] }));
+        expect(autocompleteGroupBy).toMatchSnapshot();
+    });
+});

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

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

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

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

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

@@ -135,10 +135,12 @@ const Autocomplete = ({ value = '', onValueChange, options = [], }) => {
             inputRef.current?.select();
         }, 0);
         options[0] && onValueChange(options[0]);
-        setShouldShowList(true);
+        // 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 }),
+        react_1.default.createElement("input", { type: "text", role: "input", name: "autocomplete-input", onChange: onInputChange, onKeyDown: onKeyDown, value: searchValue, ref: inputRef, onClick: () => {
+                setShouldShowList(true);
+            } }),
         renderList()));
 };
 exports.Autocomplete = Autocomplete;

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

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

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

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

package/lib/cjs/src/core-components/molecules/multi-select/multi-select.component.js

@@ -24,7 +24,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiSelect = void 0;
-/* eslint-disable  */
 const react_1 = __importStar(require("react"));
 const MultiSelect = ({ options = [], selectedItems = [], hasError = false, onSelect, }) => {
     const [selectedOptions, setSelectedOptions] = (0, react_1.useState)([]);

package/lib/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-restyle-components",
-  "version": "0.1.86",
-  "private": true,
+  "version": "0.1.88",
+  "private": false,
   "description": "Easy use restyle components",
   "author": {
     "email": "onlyappasaheb4@gmail.com",
@@ -9,33 +9,90 @@
     "url": "http://github.com/appasaheb4"
   },
   "license": "MIT",
+  "scripts": {
+    "start": "serve -s ./build",
+    "dev": "craco start",
+    "serve-webapp": "craco build && craco start",
+    "build": "rm -rf lib && chmod +x npm-publish.sh && sh ./npm-publish.sh && tsc -p tsconfig.json  & tsc -p tsconfig-cjs.json",
+    "test": "jest",
+    "eject": "react-scripts eject",
+    "precommit": "lint-staged --allow-empty",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "rm -rf docs-build && storybook build -o docs-build",
+    "deploy-storybook": "gh-pages -d docs-build",
+    "prettier": "prettier --write '**/*.{js,jsx}'",
+    "go": "npm run build && npm publish"
+  },
   "dependencies": {
+    "@loadable/component": "^5.16.4",
+    "@mui/material": "^5.15.19",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.113",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
+    "dayjs": "^1.11.1",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "^18.3.1",
+    "react-datepicker": "^4.7.0",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-scripts": "5.0.1",
+    "reactstrap": "^9.0.2",
+    "tailwindcss": "^3.0.24",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
-  "scripts": {
-    "start": "serve -s ./build",
-    "dev": "craco start",
-    "serve-webapp": "craco build && craco start",
-    "build": "rm -rf lib && chmod +x npm-publish.sh && sh ./npm-publish.sh && tsc -p tsconfig.json  & tsc -p tsconfig-cjs.json",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "precommit": "lint-staged --allow-empty",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "rm -rf docs-build && storybook build -o docs-build",
-    "deploy-storybook": "gh-pages -d docs-build",
-    "prettier": "prettier --write '**/*.{js,jsx}'",
-    "go": "npm run build && npm publish"
+  "peerDependencies": {
+    "@testing-library/jest-dom": "*",
+    "@testing-library/react": "*",
+    "@testing-library/user-event": "*",
+    "@types/jest": "*",
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "dayjs": "*",
+    "react": "*",
+    "react-datepicker": "*",
+    "react-dom": "*",
+    "react-scripts": "*",
+    "reactstrap": "*",
+    "tailwindcss": "*",
+    "typescript": "*",
+    "web-vitals": "*"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.1",
+    "@craco/craco": "^6.4.3",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@storybook/addon-essentials": "^8.0.6",
+    "@storybook/addon-interactions": "^8.0.6",
+    "@storybook/addon-links": "^8.0.6",
+    "@storybook/addon-onboarding": "^8.0.6",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.0.6",
+    "@storybook/react": "^8.0.6",
+    "@storybook/react-webpack5": "^8.0.6",
+    "@storybook/test": "^8.0.6",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/react": "^16.0.1",
+    "autoprefixer": "^10.4.19",
+    "copyfiles": "^2.4.1",
+    "craco-alias": "^3.0.1",
+    "css-loader": "^7.1.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "gh-pages": "^3.2.3",
+    "husky": "^7.0.4",
+    "jest": "^29.7.0",
+    "lint-staged": "^12.4.0",
+    "postcss-loader": "^8.1.1",
+    "sass": "^1.77.5",
+    "sass-loader": "^14.2.1",
+    "storybook": "^8.0.6",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.2.5",
+    "webpack": "^5.72.0"
   },
   "files": [
     "*.md",
@@ -65,13 +122,5 @@
     "components",
     "restyle-components",
     "tech-abl"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/appasaheb4/react-restyle-components.git"
-  },
-  "bugs": {
-    "url": "https://github.com/appasaheb4/react-restyle-components/issues"
-  },
-  "homepage": "https://github.com/appasaheb4/react-restyle-components#readme"
+  ]
 }

package/lib/src/App.css

@@ -1,5 +1,6 @@
-.App {
-  text-align: center;
+body {
+  background-color: #eeeeee;
+  padding: 40px;
 }
 
 .App-logo {

package/lib/src/App.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import './App.css';
-import { Autocomplete } from './core-components';
+import { Autocomplete, AutocompleteGroupBy } from './core-components';
 function App() {
     return (React.createElement("div", null,
-        React.createElement("div", null,
-            React.createElement("p", null, "New testing"),
-            React.createElement(Autocomplete, { value: "", onValueChange: () => { }, options: ['One', 'Two'] }))));
+        React.createElement("p", { style: { margin: '0 0 10px 0' } }, "Autocomplete Comp."),
+        React.createElement(Autocomplete, { value: "", onValueChange: () => { }, options: ['One', 'Two', 'Three', 'Four', 'Five', 'Six'] }),
+        React.createElement(AutocompleteGroupBy, { data: [
+                {
+                    title: 'Country',
+                    code: 'C',
+                    children: [
+                        { title: 'India', code: 'I' },
+                        { title: 'United States', code: 'US' },
+                    ],
+                },
+            ] })));
 }
 export default App;

package/lib/src/core-components/index.d.ts

@@ -21,4 +21,5 @@ export * from './molecules/multi-select/multi-select.component';
 export * from './molecules/multi-select-with-field/multi-select-with-field.component';
 export * from './molecules/modal-confirm/modal-confirm.component';
 export * from './molecules/autocomplete/autocomplete';
+export * from './molecules/auto-complete-group-by/auto-complete-group-by.component';
 export { Form };

package/lib/src/core-components/index.js

@@ -21,4 +21,5 @@ export * from './molecules/multi-select/multi-select.component';
 export * from './molecules/multi-select-with-field/multi-select-with-field.component';
 export * from './molecules/modal-confirm/modal-confirm.component';
 export * from './molecules/autocomplete/autocomplete';
+export * from './molecules/auto-complete-group-by/auto-complete-group-by.component';
 export { Form };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface AutocompleteGroupByProps {
+    data: any[];
+    onChange?: (item: any, children: any) => void;
+    hasError?: boolean;
+    displayValue?: string;
+    onClose?: () => void;
+}
+export declare const AutocompleteGroupBy: (props: AutocompleteGroupByProps) => React.JSX.Element;
+export {};