new Name SearchMultiSelectGroups

Author: belindaDominguez

…cules/SearchMultiSelectExtended.test .js …lecules/SearchMultiSelectGroups.test .js_tests/molecules/SearchMultiSelectExtended.test .js renamed to _tests/molecules/SearchMultiSelectGroups.test .js _tests/molecules/SearchMultiSelectExtended.test .js renamed to _tests/molecules/SearchMultiSelectGroups.test .js

@@ -1,6 +1,6 @@
 /* globals mount */
 import React from 'react';
-import SearchMultiSelectExtended from '../../components/molecules/SearchMultiSelectExtended';
+import SearchMultiSelectGroups from '../../components/molecules/SearchMultiSelectGroups';
 
 const defaultProps = {
     options: [
@@ -20,9 +20,9 @@ const defaultProps = {
     multiTerm: false
 };
 
-describe('Expect <SearchMultiSelectExtended>', () => {
+describe('Expect <SearchMultiSelectGroups>', () => {
     it('to render', () => {
-        const wrapper = mount(<SearchMultiSelectExtended {...defaultProps} />);
+        const wrapper = mount(<SearchMultiSelectGroups {...defaultProps} />);
         expect(wrapper).toMatchSnapshot();
     });
 });

…/molecules/SearchMultiSelectExtended.jsx …ts/molecules/SearchMultiSelectGroups.jsxcomponents/molecules/SearchMultiSelectExtended.jsx renamed to components/molecules/SearchMultiSelectGroups.jsx components/molecules/SearchMultiSelectExtended.jsx renamed to components/molecules/SearchMultiSelectGroups.jsx

@@ -9,7 +9,7 @@ import Checkbox from './Checkbox';
 import arraysEqual from '../utils/arraysEqual';
 import escapeRegExp from '../utils/escapeRegExp';
 
-const SearchMultiSelectExtended = ({
+const SearchMultiSelectGroups = ({
     options,
     searchKeys,
     multiTerm,
@@ -369,9 +369,9 @@ const getMatchingIndexes = (options, query, config) => {
     return matchingOptionsIndex.length > 0 ? matchingOptionsIndex : matchingSingleIndex;
 };
 
-SearchMultiSelectExtended.displayName = 'SearchMultiSelectExtended';
+SearchMultiSelectGroups.displayName = 'SearchMultiSelectGroups';
 
-SearchMultiSelectExtended.defaultProps = {
+SearchMultiSelectGroups.defaultProps = {
     context: 'primary',
     placeholder: '',
     size: 'md',
@@ -381,7 +381,7 @@ SearchMultiSelectExtended.defaultProps = {
     termDivider: /[ ,]+/,
 };
 
-SearchMultiSelectExtended.propTypes = {
+SearchMultiSelectGroups.propTypes = {
     /** List of options {array of objects} */
     options: PropTypes.array.isRequired,
     /** Function that returns the latest change on options */
@@ -402,4 +402,4 @@ SearchMultiSelectExtended.propTypes = {
     inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
 
-export default SearchMultiSelectExtended;
+export default SearchMultiSelectGroups;

…/molecules/SearchMultiSelectExtended.mdx …es/molecules/SearchMultiSelectGroups.mdxstories/molecules/SearchMultiSelectExtended.mdx renamed to stories/molecules/SearchMultiSelectGroups.mdx stories/molecules/SearchMultiSelectExtended.mdx renamed to stories/molecules/SearchMultiSelectGroups.mdx

@@ -2,16 +2,16 @@ import { Story, Props } from '@storybook/addon-docs/blocks';
 import { Canvas, Source } from '@storybook/blocks';
 import { ArgsTable } from '@storybook/addon-docs';
 
-import * as SearchMultiSelectExtendedStories from './SearchMultiSelectExtended.stories';
-import SearchMultiSelectExtended from '../../components/molecules/SearchMultiSelectExtended';
+import * as SearchMultiSelectGroupsStories from './SearchMultiSelectGroups.stories';
+import SearchMultiSelectGroups from '../../components/molecules/SearchMultiSelectGroups';
 
-# SearchMultiSelectExtended
+# SearchMultiSelectGroups
 
-The `<SearchMultiSelectExtended>` is similar to the `<MultiSelect>` component, but this component can display hierarchical tree data. In addition, it shows the selection in grouped and allows user to search the options for quick filtering and selection.
+The `<SearchMultiSelectGroups>` is an option list which can also contain groups. It shows the selection grouped as a tree and allows user to search the options for quick filtering and selection.
 
-As the name suggests, the `<SearchMultiSelectExtended>` comes with a case insensitive term matching, and a small tag indicator to show you how many options were selected, as well a small balloon where you can quickly see what options you have selected so far.
+As the name suggests, the `<SearchMultiSelectGroups>` comes with a small tag indicator to show you how many options were selected, as well a small balloon where you can quickly see what options you have selected so far.
 
-Search-Multi-select supports nested options [See Nested Options](#nested-options). When a parent option is selected, all children will be selected. If all children are selected, the parent will be selected too.
+Search-Multi-Select-Groups supports nested options [See Nested Options](#nested-options). When a parent option is selected, all children will be selected. If all children are selected, the parent will be selected too.
 
 ## Options
 
@@ -104,7 +104,7 @@ const pets = [
 ```jsx
 
 const [pets, setPets] = useState(initialPetsObject);
-return <SearchMultiSelectExtended onChange={newPets => setPets(newPets)} options={pets} size="md" />;
+return <SearchMultiSelectGroups onChange={newPets => setPets(newPets)} options={pets} size="md" />;
 ```
 
 
@@ -114,12 +114,12 @@ return <SearchMultiSelectExtended onChange={newPets => setPets(newPets)} options
 | esc   | closes the dropdown                      |
 ## Component Example
 
-<Canvas of={SearchMultiSelectExtendedStories.Default} />
+<Canvas of={SearchMultiSelectGroupsStories.Default} />
 
 ## Component Example Source
 
-<Source of={SearchMultiSelectExtendedStories.Default} />
+<Source of={SearchMultiSelectGroupsStories.Default} />
 
-## SearchMultiSelectExtended Props
+## SearchMultiSelectGroups Props
 
-<ArgsTable of={SearchMultiSelectExtended} />
+<ArgsTable of={SearchMultiSelectGroups} />

…les/SearchMultiSelectExtended.stories.js …cules/SearchMultiSelectGroups.stories.jsstories/molecules/SearchMultiSelectExtended.stories.js renamed to stories/molecules/SearchMultiSelectGroups.stories.js stories/molecules/SearchMultiSelectExtended.stories.js renamed to stories/molecules/SearchMultiSelectGroups.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SearchMultiSelectExtended from '../../components/molecules/SearchMultiSelectExtended';
+import SearchMultiSelectGroups from '../../components/molecules/SearchMultiSelectGroups';
 
 const optionsA = [
     {
@@ -84,8 +84,8 @@ const optionsB = [
 const sizeOptions = ['', 'xs', 'sm'];
 
 export default {
-    title: 'Molecules/SearchMultiSelectExtended',
-    component: SearchMultiSelectExtended,
+    title: 'Molecules/SearchMultiSelectGroups',
+    component: SearchMultiSelectGroups,
     argTypes: {
         placeholder: { control: 'text' },
         onChange: { action: 'change' },
@@ -98,7 +98,7 @@ export default {
 
 
 const Template = args => {
-    return <SearchMultiSelectExtended {...args} />;
+    return <SearchMultiSelectGroups {...args} />;
 };
 
 export const Default = Template.bind({});