@digigov/react-core 1.3.0-dcbd7ded → 2.0.0-0edebf87

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@digigov/react-core",
-  "version": "1.3.0-dcbd7ded",
+  "version": "2.0.0-0edebf87",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "peerDependencies": {
-    "@digigov/css": "1.3.0-dcbd7ded",
-    "@digigov/react-icons": "1.2.0-dcbd7ded",
+    "@digigov/css": "2.0.0-0edebf87",
+    "@digigov/react-icons": "2.0.0-0edebf87",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/registry/index.js

@@ -13,13 +13,15 @@ import * as _digigov_react_core_AdminMain from '@digigov/react-core/AdminMain';
 import * as _digigov_react_core_AdminTopSection from '@digigov/react-core/AdminTopSection';
 import * as _digigov_react_core_Aside from '@digigov/react-core/Aside';
 import * as _digigov_react_core_AutoCompleteAssistiveHint from '@digigov/react-core/AutoCompleteAssistiveHint';
+import * as _digigov_react_core_AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
 import * as _digigov_react_core_AutoCompleteInput from '@digigov/react-core/AutoCompleteInput';
 import * as _digigov_react_core_AutoCompleteInputTypeahead from '@digigov/react-core/AutoCompleteInputTypeahead';
+import * as _digigov_react_core_AutoCompleteMultipleInput from '@digigov/react-core/AutoCompleteMultipleInput';
+import * as _digigov_react_core_AutoCompleteMultipleInputContainer from '@digigov/react-core/AutoCompleteMultipleInputContainer';
 import * as _digigov_react_core_AutoCompleteResultList from '@digigov/react-core/AutoCompleteResultList';
 import * as _digigov_react_core_AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultListItem';
 import * as _digigov_react_core_AutoCompleteStatus from '@digigov/react-core/AutoCompleteStatus';
-import * as _digigov_react_core_AutoCompleteStatusWrapper from '@digigov/react-core/AutoCompleteStatusWrapper';
-import * as _digigov_react_core_AutoCompleteWrapper from '@digigov/react-core/AutoCompleteWrapper';
+import * as _digigov_react_core_AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
 import * as _digigov_react_core_BackLink from '@digigov/react-core/BackLink';
 import * as _digigov_react_core_BackToTopContainer from '@digigov/react-core/BackToTopContainer';
 import * as _digigov_react_core_BackToTopLimit from '@digigov/react-core/BackToTopLimit';
@@ -189,6 +191,7 @@ import * as _digigov_react_core_SelectContainer from '@digigov/react-core/Select
 import * as _digigov_react_core_SelectOption from '@digigov/react-core/SelectOption';
 import * as _digigov_react_core_SingleCharacterInput from '@digigov/react-core/SingleCharacterInput';
 import * as _digigov_react_core_SingleCharacterInputs from '@digigov/react-core/SingleCharacterInputs';
+import * as _digigov_react_core_Skeleton from '@digigov/react-core/Skeleton';
 import * as _digigov_react_core_SkipLink from '@digigov/react-core/SkipLink';
 import * as _digigov_react_core_Stack from '@digigov/react-core/Stack';
 import * as _digigov_react_core_StepNav from '@digigov/react-core/StepNav';
@@ -271,13 +274,15 @@ export default {
   '@digigov/react-core/AdminTopSection': lazyImport(_digigov_react_core_AdminTopSection),
   '@digigov/react-core/Aside': lazyImport(_digigov_react_core_Aside),
   '@digigov/react-core/AutoCompleteAssistiveHint': lazyImport(_digigov_react_core_AutoCompleteAssistiveHint),
+  '@digigov/react-core/AutoCompleteContainer': lazyImport(_digigov_react_core_AutoCompleteContainer),
   '@digigov/react-core/AutoCompleteInput': lazyImport(_digigov_react_core_AutoCompleteInput),
   '@digigov/react-core/AutoCompleteInputTypeahead': lazyImport(_digigov_react_core_AutoCompleteInputTypeahead),
+  '@digigov/react-core/AutoCompleteMultipleInput': lazyImport(_digigov_react_core_AutoCompleteMultipleInput),
+  '@digigov/react-core/AutoCompleteMultipleInputContainer': lazyImport(_digigov_react_core_AutoCompleteMultipleInputContainer),
   '@digigov/react-core/AutoCompleteResultList': lazyImport(_digigov_react_core_AutoCompleteResultList),
   '@digigov/react-core/AutoCompleteResultListItem': lazyImport(_digigov_react_core_AutoCompleteResultListItem),
   '@digigov/react-core/AutoCompleteStatus': lazyImport(_digigov_react_core_AutoCompleteStatus),
-  '@digigov/react-core/AutoCompleteStatusWrapper': lazyImport(_digigov_react_core_AutoCompleteStatusWrapper),
-  '@digigov/react-core/AutoCompleteWrapper': lazyImport(_digigov_react_core_AutoCompleteWrapper),
+  '@digigov/react-core/AutoCompleteStatusContainer': lazyImport(_digigov_react_core_AutoCompleteStatusContainer),
   '@digigov/react-core/BackLink': lazyImport(_digigov_react_core_BackLink),
   '@digigov/react-core/BackToTopContainer': lazyImport(_digigov_react_core_BackToTopContainer),
   '@digigov/react-core/BackToTopLimit': lazyImport(_digigov_react_core_BackToTopLimit),
@@ -447,6 +452,7 @@ export default {
   '@digigov/react-core/SelectOption': lazyImport(_digigov_react_core_SelectOption),
   '@digigov/react-core/SingleCharacterInput': lazyImport(_digigov_react_core_SingleCharacterInput),
   '@digigov/react-core/SingleCharacterInputs': lazyImport(_digigov_react_core_SingleCharacterInputs),
+  '@digigov/react-core/Skeleton': lazyImport(_digigov_react_core_Skeleton),
   '@digigov/react-core/SkipLink': lazyImport(_digigov_react_core_SkipLink),
   '@digigov/react-core/Stack': lazyImport(_digigov_react_core_Stack),
   '@digigov/react-core/StepNav': lazyImport(_digigov_react_core_StepNav),

package/registry.d.ts

@@ -14,13 +14,15 @@ declare const _default: {
     '@digigov/react-core/AdminTopSection': {};
     '@digigov/react-core/Aside': {};
     '@digigov/react-core/AutoCompleteAssistiveHint': {};
+    '@digigov/react-core/AutoCompleteContainer': {};
     '@digigov/react-core/AutoCompleteInput': {};
     '@digigov/react-core/AutoCompleteInputTypeahead': {};
+    '@digigov/react-core/AutoCompleteMultipleInput': {};
+    '@digigov/react-core/AutoCompleteMultipleInputContainer': {};
     '@digigov/react-core/AutoCompleteResultList': {};
     '@digigov/react-core/AutoCompleteResultListItem': {};
     '@digigov/react-core/AutoCompleteStatus': {};
-    '@digigov/react-core/AutoCompleteStatusWrapper': {};
-    '@digigov/react-core/AutoCompleteWrapper': {};
+    '@digigov/react-core/AutoCompleteStatusContainer': {};
     '@digigov/react-core/BackLink': {};
     '@digigov/react-core/BackToTopContainer': {};
     '@digigov/react-core/BackToTopLimit': {};
@@ -190,6 +192,7 @@ declare const _default: {
     '@digigov/react-core/SelectOption': {};
     '@digigov/react-core/SingleCharacterInput': {};
     '@digigov/react-core/SingleCharacterInputs': {};
+    '@digigov/react-core/Skeleton': {};
     '@digigov/react-core/SkipLink': {};
     '@digigov/react-core/Stack': {};
     '@digigov/react-core/StepNav': {};

package/src/AdminAside/__snapshots__/index.test.tsx.snap

@@ -4,15 +4,19 @@ exports[`renders the AdminAside with no prop 1`] = `
 <ForwardRef(AdminAside)>
   <ForwardRef(Grid)
     as="aside"
-    className="ds-admin-side-content"
+    className="ds-admin-aside"
     item={true}
+    lg={3}
+    md={4}
+    spacing={4}
+    xs={12}
   >
     <ForwardRef(Base)
       as="aside"
-      className="ds-admin-side-content"
+      className="ds-admin-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4 lg:ds-grid__col-span-3"
     >
       <aside
-        className="ds-admin-side-content"
+        className="ds-admin-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4 lg:ds-grid__col-span-3"
       >
         hello
       </aside>

package/src/AdminAside/index.tsx

@@ -12,10 +12,14 @@ export const AdminAside = React.forwardRef<HTMLElement, AdminAsideProps>(
     return (
       <Grid
         as="aside"
-        ref={ref}
         item
+        xs={12}
+        md={4}
+        lg={3}
+        spacing={4}
+        ref={ref}
         className={clsx(className, {
-          'ds-admin-side-content': true,
+          'ds-admin-aside': true,
         })}
         {...props}
       >

package/src/AdminContainer/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the AdminContainer with no props 1`] = `
-<ForwardRef(AdminContainer)>
+exports[`renders the AdminContainer with no grid 1`] = `
+<ForwardRef(AdminContainer)
+  grid={false}
+>
   <ForwardRef(Container)
     fullWidth={true}
     grid={false}
@@ -17,11 +19,37 @@ exports[`renders the AdminContainer with no props 1`] = `
         <div
           className="ds-container--full-width ds-container"
         >
-          <div
-            className="ds-admin-main-wrapper"
-          >
-            hello
-          </div>
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
+  </ForwardRef(Container)>
+</ForwardRef(AdminContainer)>
+`;
+
+exports[`renders the AdminContainer with no props 1`] = `
+<ForwardRef(AdminContainer)>
+  <ForwardRef(Container)
+    fullWidth={true}
+    grid={true}
+  >
+    <ForwardRef(Grid)
+      className="ds-container--full-width ds-container"
+      container={true}
+      spacing={
+        Object {
+          "sm": 12,
+        }
+      }
+    >
+      <ForwardRef(Base)
+        as="div"
+        className="ds-container--full-width ds-container ds-gap-sm-12 ds-grid"
+      >
+        <div
+          className="ds-container--full-width ds-container ds-gap-sm-12 ds-grid"
+        >
+          hello
         </div>
       </ForwardRef(Base)>
     </ForwardRef(Grid)>

package/src/AdminContainer/index.test.tsx

@@ -6,3 +6,6 @@ import AdminContainer from '@digigov/react-core/AdminContainer';
 it('renders the AdminContainer with no props', () => {
   expect(mount(<AdminContainer>hello</AdminContainer>)).toMatchSnapshot();
 });
+it('renders the AdminContainer with no grid', () => {
+  expect(mount(<AdminContainer grid={false}>hello</AdminContainer>)).toMatchSnapshot();
+});

package/src/AdminContainer/index.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
-import clsx from 'clsx';
 import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface AdminContainerProps extends Omit<ContainerProps, 'grid'> { }
+export interface AdminContainerProps extends Omit<ContainerProps, 'grid'> {
+  /**
+   * grid is optional. Set to false if you don't need grid layout.
+   * @value true
+   * @value false
+   * @default true
+   */
+  grid?: boolean;
+}
 /**
  * AdminContainer is a wrapper for the content of the page
  * Use AdminContainer inside AdminLayout component
@@ -10,22 +17,16 @@ export interface AdminContainerProps extends Omit<ContainerProps, 'grid'> { }
 export const AdminContainer = React.forwardRef<
   HTMLDivElement,
   AdminContainerProps
->(function AdminContainer({ className, children, ...props }, ref) {
+>(function AdminContainer({ grid = true, className, children, ...props }, ref) {
   return (
     <Container
       ref={ref}
       fullWidth={true}
-      grid={false}
+      grid={grid}
       className={className}
       {...props}
     >
-      <div
-        className={clsx({
-          'ds-admin-main-wrapper': true,
-        })}
-      >
-        {children}
-      </div>
+      {children}
     </Container>
   );
 });

package/src/AdminMain/__snapshots__/index.test.tsx.snap

@@ -4,15 +4,18 @@ exports[`renders the AdminMain with no prop 1`] = `
 <ForwardRef(AdminMain)>
   <ForwardRef(Grid)
     as="main"
-    className="ds-admin-main-content"
+    className="ds-admin-main"
     item={true}
+    lg={9}
+    md={8}
+    xs={12}
   >
     <ForwardRef(Base)
       as="main"
-      className="ds-admin-main-content"
+      className="ds-admin-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8 lg:ds-grid__col-span-9"
     >
       <main
-        className="ds-admin-main-content"
+        className="ds-admin-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8 lg:ds-grid__col-span-9"
       >
         hello
       </main>

package/src/AdminMain/index.tsx

@@ -7,14 +7,17 @@ export interface AdminMainProps extends GridProps { }
  * Use this inside AdminContainer component for placing the main content of the page
  */
 export const AdminMain = React.forwardRef<HTMLDivElement, AdminMainProps>(
-  function AdminMain({ className, children, ...props }, ref) {
+  function AdminMain({ className, children, id = 'main-content', ...props }, ref) {
     return (
       <Grid
         item
         as="main"
+        xs={12}
+        md={8}
+        lg={9}
         ref={ref}
         className={clsx(className, {
-          'ds-admin-main-content': true,
+          'ds-admin-main': true,
         })}
         {...props}
       >

package/src/Aside/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the Aside with no props 1`] = `
 <ForwardRef(Aside)>
   <ForwardRef(Grid)
     as="aside"
-    className="ds-aside"
+    className="ds-aside--sticky ds-aside"
     item={true}
     md={4}
     spacing={4}
@@ -12,10 +12,10 @@ exports[`renders the Aside with no props 1`] = `
   >
     <ForwardRef(Base)
       as="aside"
-      className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
+      className="ds-aside--sticky ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
     >
       <aside
-        className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
+        className="ds-aside--sticky ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
       >
         hello
       </aside>

package/{cjs/AutoCompleteWrapper → src/AutoCompleteContainer}/__snapshots__/index.test.tsx.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the AdminContainer with no props 1`] = `
-<ForwardRef(AutoCompleteWrapper)>
+<ForwardRef(AutoCompleteContainer)>
   <ForwardRef(Base)
     as="div"
-    className="ds-autocomplete__wrapper"
+    className="ds-autocomplete__container"
   >
     <div
-      className="ds-autocomplete__wrapper"
+      className="ds-autocomplete__container"
     >
       hello
     </div>
   </ForwardRef(Base)>
-</ForwardRef(AutoCompleteWrapper)>
+</ForwardRef(AutoCompleteContainer)>
 `;

package/src/{AutoCompleteWrapper → AutoCompleteContainer}/index.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import AutoCompleteWrapper from '@digigov/react-core/AutoCompleteWrapper';
+import AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
 
 it('renders the AdminContainer with no props', () => {
   expect(
-    mount(<AutoCompleteWrapper>hello</AutoCompleteWrapper>)
+    mount(<AutoCompleteContainer>hello</AutoCompleteContainer>)
   ).toMatchSnapshot();
 });

package/src/{AutoCompleteWrapper → AutoCompleteContainer}/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AutoCompleteWrapperProps extends BaseProps<'div'> {
+export interface AutoCompleteContainerProps extends BaseProps<'div'> {
   /**
    * width is optional.
    * Use width prop to define a custom width in your component.
@@ -17,19 +17,19 @@ export interface AutoCompleteWrapperProps extends BaseProps<'div'> {
   width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
 }
 /**
- * AutoCompleteWrapper is a wrapper for autocomplete element.
- * Use AutoCompleteWrapper to wrap autocomplete elements.
+ * AutoCompleteContainer is a wrapper for autocomplete element.
+ * Use AutoCompleteContainer to wrap autocomplete elements.
  */
-export const AutoCompleteWrapper = React.forwardRef<
+export const AutoCompleteContainer = React.forwardRef<
   HTMLDivElement,
-  AutoCompleteWrapperProps
->(function AutoCompleteWrapper({ className, width, children, ...props }, ref) {
+  AutoCompleteContainerProps
+>(function AutoCompleteContainer({ className, width, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-autocomplete__wrapper': true,
+        'ds-autocomplete__container': true,
         'ds-!-width-one-quarter': width === '25%',
         'ds-!-width-one-third': width === '33.3%',
         'ds-!-width-one-half': width === '50%',
@@ -44,4 +44,4 @@ export const AutoCompleteWrapper = React.forwardRef<
   );
 });
 
-export default AutoCompleteWrapper;
+export default AutoCompleteContainer;

package/src/AutoCompleteInput/__snapshots__/index.test.tsx.snap

@@ -1,87 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the AutoCompleteInput with no props 1`] = `
-<ForwardRef(AutoCompleteInput)>
-  <ForwardRef(Base)
-    as="input"
-    className="ds-autocomplete__input--default ds-autocomplete__input"
-    type="text"
-  >
-    <input
-      className="ds-autocomplete__input--default ds-autocomplete__input"
-      type="text"
-    />
-  </ForwardRef(Base)>
-</ForwardRef(AutoCompleteInput)>
-`;
-
-exports[`renders the AutoCompleteInput with showAllValues 1`] = `
-<ForwardRef(AutoCompleteInput)
-  showAllValues={true}
->
-  <ForwardRef(Base)
-    as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
-    type="text"
-  >
-    <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
-      type="text"
-    />
-  </ForwardRef(Base)>
-</ForwardRef(AutoCompleteInput)>
-`;
-
-exports[`renders the AutoCompleteInput with showAllValues 2`] = `
+exports[`renders the AutoCompleteInput with isFocused 1`] = `
 <ForwardRef(AutoCompleteInput)
-  showAllValues={true}
+  isFocused={true}
 >
   <ForwardRef(Base)
     as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
+    className="ds-autocomplete__input--focused ds-autocomplete__input"
     type="text"
   >
     <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input"
+      className="ds-autocomplete__input--focused ds-autocomplete__input"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(AutoCompleteInput)>
 `;
 
-exports[`renders the AutoCompleteInput with showAllValues isFocused 1`] = `
+exports[`renders the AutoCompleteInput with isFocused and name props 1`] = `
 <ForwardRef(AutoCompleteInput)
   isFocused={true}
-  showAllValues={true}
+  name="some-name"
 >
   <ForwardRef(Base)
     as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
+    className="ds-autocomplete__input--focused ds-autocomplete__input"
+    name="some-name"
     type="text"
   >
     <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
+      className="ds-autocomplete__input--focused ds-autocomplete__input"
+      name="some-name"
       type="text"
     />
   </ForwardRef(Base)>
 </ForwardRef(AutoCompleteInput)>
 `;
 
-exports[`renders the AutoCompleteInput with showAllValues isFocused name props 1`] = `
-<ForwardRef(AutoCompleteInput)
-  isFocused={true}
-  name="some-name"
-  showAllValues={true}
->
+exports[`renders the AutoCompleteInput with no props 1`] = `
+<ForwardRef(AutoCompleteInput)>
   <ForwardRef(Base)
     as="input"
-    className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
-    name="some-name"
+    className="ds-autocomplete__input"
     type="text"
   >
     <input
-      className="ds-autocomplete__input--show-all-values ds-autocomplete__input--focused ds-autocomplete__input"
-      name="some-name"
+      className="ds-autocomplete__input"
       type="text"
     />
   </ForwardRef(Base)>

package/src/AutoCompleteInput/index.test.tsx

@@ -7,22 +7,14 @@ it('renders the AutoCompleteInput with no props', () => {
   expect(mount(<AutoCompleteInput />)).toMatchSnapshot();
 });
 
-it('renders the AutoCompleteInput with showAllValues', () => {
-  expect(mount(<AutoCompleteInput showAllValues />)).toMatchSnapshot();
-});
-
-it('renders the AutoCompleteInput with showAllValues', () => {
-  expect(mount(<AutoCompleteInput showAllValues />)).toMatchSnapshot();
-});
-
-it('renders the AutoCompleteInput with showAllValues isFocused', () => {
+it('renders the AutoCompleteInput with isFocused', () => {
   expect(
-    mount(<AutoCompleteInput isFocused showAllValues />)
+    mount(<AutoCompleteInput isFocused />)
   ).toMatchSnapshot();
 });
 
-it('renders the AutoCompleteInput with showAllValues isFocused name props', () => {
+it('renders the AutoCompleteInput with isFocused and name props', () => {
   expect(
-    mount(<AutoCompleteInput name="some-name" isFocused showAllValues />)
+    mount(<AutoCompleteInput name="some-name" isFocused />)
   ).toMatchSnapshot();
 });

package/src/AutoCompleteInput/index.tsx

@@ -9,14 +9,7 @@ export interface AutoCompleteInputProps extends BaseProps<'input'> {
    * @value false
    */
   isFocused?: boolean;
-  /**
-   * showAllValues is optional. The default value is false.
-   * showAllValues prop is used to change the css input.
-   * @value true
-   * @value false
-   * @default false
-   */
-  showAllValues?: boolean;
+
 }
 /**
  * AutoCompleteInput component is used to display the value that the user is typing.
@@ -26,7 +19,7 @@ export const AutoCompleteInput = React.forwardRef<
   HTMLInputElement,
   AutoCompleteInputProps
 >(function AutoCompleteInput(
-  { name, isFocused, showAllValues = false, className, ...props },
+  { name, isFocused, className, ...props },
   ref
 ) {
   return (
@@ -37,8 +30,6 @@ export const AutoCompleteInput = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'ds-autocomplete__input': true,
-        'ds-autocomplete__input--default': showAllValues === false,
-        'ds-autocomplete__input--show-all-values': showAllValues,
         'ds-autocomplete__input--focused': isFocused,
       })}
       {...props}

package/src/AutoCompleteMultipleInput/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AutoCompleteMultipleInputProps extends BaseProps<'input'> {}
+/**
+ * AutoCompleteMultipleInput is used inside AutoCompleteMultipleInputContainer for multiple values input.
+ */
+export const AutoCompleteMultipleInput = React.forwardRef<
+  HTMLInputElement,
+  AutoCompleteMultipleInputProps
+>(function AutoCompleteMultipleInput({ children, className, ...props }, ref) {
+  return (
+    <Base
+      as="input"
+      type="text"
+      ref={ref}
+      className={clsx(className, {
+        'ds-autocomplete__multi-input': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AutoCompleteMultipleInput;

package/src/AutoCompleteMultipleInputContainer/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AutoCompleteMultipleInputContainerProps
+  extends BaseProps<'div'> {
+  open?: boolean;
+  isFocused?: boolean;
+  numberOfSelected?: 1 | 2 | 3 | 'all';  
+}
+/**
+ * Use AutoCompleteMultipleInputContainer to accept multiple values input.
+ */
+export const AutoCompleteMultipleInputContainer = React.forwardRef<
+  HTMLDivElement,
+  AutoCompleteMultipleInputContainerProps
+>(function AutoCompleteMultipleInputContainer(
+  { numberOfSelected = 'all', open, children, isFocused, className, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'ds-autocomplete__multi-input-container': true,
+        'ds-autocomplete__multi-input-container--focused': isFocused,
+        [`ds-autocomplete__multi-input-container--${numberOfSelected}`]: typeof(numberOfSelected) === 'number' 
+        
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AutoCompleteMultipleInputContainer;