Minor fir for autocomplete and stepper (#114)

* Update stepper component.

* Remove Carousel from stepper.
* Remove Children props from stepper.

* Add keywords mode to auto complete.

* Change selected style for multiple and keywords mode.

* Fix failing test

__tests__/components/Stepper/Stepper.spec.tsx

@@ -7,26 +7,18 @@ import { MdHome, MdClearAll } from 'react-icons/md';
 const renderStep = (current?: number) =>
   render(
     <Stepper current={current}>
-      <Step error="Error" title="1" description="This is a description text" key="1" icon={<MdHome />}>
-        Step 1
-      </Step>
-      <Step disabled title="Enter Step 2" key="2">
-        Step 2
-      </Step>
-      <Step key="3" title="3" icon={<MdClearAll />}>
-        Step 3
-      </Step>
+      <Step error="Error" title="1" description="This is a description text" key="1" icon={<MdHome />} />
+      <Step disabled title="Enter Step 2" key="2" />
+      <Step key="3" title="3" icon={<MdClearAll />} />
     </Stepper>,
   );
 
 const renderNonLinearStep = (current?: number, onChange?: (e: number) => void) =>
   render(
     <Stepper nonLinear onChange={onChange} current={current}>
-      <Step icon={<MdHome title="icon" />} title="1">
-        Step 1
-      </Step>
-      <Step title="Title 2">Step 2</Step>
-      <Step>Step 3</Step>
+      <Step icon={<MdHome title="icon" />} title="1" />
+      <Step title="Title 2" />
+      <Step />
     </Stepper>,
   );
 
@@ -35,11 +27,9 @@ describe('Stepper', () => {
     renderStep();
 
     const row = document.querySelector('.sha-el-row');
-    const carousel = document.body.children[2].children[1];
 
     // 3 icons, 3 title and 2 <Divider />
     expect(row.children.length).toBe(3 + 3 + 2);
-    expect(carousel.children[0].children.length).toBe(3);
   });
 
   it('should render a step with error', () => {
@@ -97,10 +87,4 @@ describe('Stepper', () => {
       color: rgb(33, 150, 243);
     `);
   });
-
-  it('should render a step', () => {
-    render(<Step>Hello</Step>);
-
-    expect(screen.getByText('Hello').innerHTML).toBe('Hello');
-  });
 });

src/components/AutoComplete/AutoComplete.stories.tsx

@@ -106,3 +106,21 @@ export const CustomAnchorElement: Story<SingleAutoComplete<string>> = () => {
     </AutoComplete>
   );
 };
+
+export const Keywords: Story<MultiAutoComplete<string>> = () => {
+  const [value, update] = React.useState(['Clark', 'Arthur']);
+
+  return (
+    <AutoComplete<string>
+      mode="keywords"
+      data={(s) => [s, 'Bruce', 'Clark', 'Arthur', 'Diana']}
+      uniqueIdentifier={(e) => e}
+      listDisplayProp={(e) => e}
+      label="Select Alter Ego"
+      value={value}
+      displayValue={(e) => e as string}
+      onChange={(e: string[]) => update(e)}
+      searchValue={(e) => e}
+    />
+  );
+};

src/components/AutoComplete/AutoComplete.tsx

@@ -12,7 +12,7 @@ import { Skeleton } from '../Loading';
 export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State<T>> {
   dataActualLength = 0;
 
-  constructor(props) {
+  constructor(props: AutoCompleteProps<T>) {
     super(props);
 
     this.state = {
@@ -50,7 +50,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
       return;
     }
     if (!open) {
-      return this.setState({ open, selected: -1, search: '' }, callback);
+      return this.setState({ open, selected: this.props.mode === 'keywords' ? 0 : -1, search: '' }, callback);
     }
     open && this.fetchData();
     this.setState({ open }, callback);
@@ -126,7 +126,15 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
     return [
       before,
       ...(value as T[]).map((v) => (
-        <Tag color="#aaa" textColor="light" onClick={() => this.onChange(v)} outline key={uniqueIdentifier(v)}>
+        <Tag
+          color="#aaa"
+          textColor="light"
+          chips
+          elevation={0}
+          style={{ border: 'none', background: 'transparent', textTransform: 'none', fontWeight: 400 }}
+          onClick={() => this.onChange(v)}
+          key={uniqueIdentifier(v)}
+        >
           {displayValue(v)}
         </Tag>
       )),
@@ -142,7 +150,6 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
         flat
         shape="circle"
         icon={open ? <MdExpandLess key="expand" /> : <MdExpandMore key="expand" />}
-        onClick={(e: React.MouseEvent) => e.preventDefault()}
       />,
     ];
 
@@ -251,7 +258,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
     return (
       <Popover
         trigger="onClick"
-        placement="bottom"
+        placement="bottom-start"
         overlay={this.displayList()}
         onVisibleChange={(v) => this.onOpen(v)}
         visible={open}
@@ -291,7 +298,7 @@ export interface SingleAutoComplete<T> extends BaseAutoComplete<T> {
 }
 
 export interface MultiAutoComplete<T> extends BaseAutoComplete<T> {
-  mode?: 'multiple';
+  mode?: 'multiple' | 'keywords';
   value?: T[];
   onChange?: (value: T[]) => void;
 }

src/components/Stepper/Stepper.stories.tsx

@@ -16,7 +16,6 @@ export default {
 
 const Template: Story<StepperProps> = (args) => {
   const [step, updateStep] = React.useState(0);
-  console.log(step);
   return (
     <div style={{ minWidth: '800px' }}>
       <Stepper {...args} current={step} onChange={updateStep} />
@@ -30,45 +29,27 @@ const Template: Story<StepperProps> = (args) => {
 export const Basic = Template.bind({});
 Basic.args = {
   children: [
-    <Step title="Enter User Details" description="This is a description text" key="1" icon={<MdHome />}>
-      Step 1
-    </Step>,
-    <Step title="Enter Company Details" key="2">
-      Step 2
-    </Step>,
-    <Step key="3" icon={<MdClearAll />}>
-      Step 3
-    </Step>,
+    <Step title="Enter User Details" description="This is a description text" key="1" icon={<MdHome />} />,
+    <Step title="Enter Company Details" key="2" />,
+    <Step key="3" icon={<MdClearAll />} />,
   ],
 };
 
 export const Error = Template.bind({});
 Error.args = {
   children: [
-    <Step title="Enter User Details" error="Some error" key="1" icon={<MdHome />}>
-      Step 1
-    </Step>,
-    <Step title="Enter Company Details" key="2">
-      Step 2
-    </Step>,
-    <Step key="3" icon={<MdClearAll />}>
-      Step 3
-    </Step>,
+    <Step title="Enter User Details" error="Some error" key="1" icon={<MdHome />} />,
+    <Step title="Enter Company Details" key="2" />,
+    <Step key="3" icon={<MdClearAll />} />,
   ],
 };
 
 export const NonLinear = Template.bind({});
 NonLinear.args = {
   nonLinear: true,
   children: [
-    <Step error="Some error" key="1" icon={<MdHome />}>
-      Step 1
-    </Step>,
-    <Step title="Enter Company Details" key="2">
-      Step 2
-    </Step>,
-    <Step title="Disabled Step" disabled key="3" icon={<MdClearAll />}>
-      Step 3
-    </Step>,
+    <Step error="Some error" key="1" icon={<MdHome />} />,
+    <Step title="Enter Company Details" key="2" />,
+    <Step title="Disabled Step" disabled key="3" icon={<MdClearAll />} />,
   ],
 };

src/components/Stepper/Stepper.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { MdCheck } from 'react-icons/md';
 import { classes } from '../../helpers';
 import { lightText } from '../../helpers/color';
-import { Carousel } from '../Carousel';
 import { Divider } from '../Divider';
 import { Col, Row } from '../Grid';
 import { Text } from '../Text';
@@ -74,7 +73,7 @@ export const Stepper: React.FC<StepperProps> = (props) => {
                 onClick={() => nonLinear && !el.props.disabled && onChange(i)}
                 className={classes(css.number, numberCss, css.container, nonLinear && css.clickable)}
               >
-                {i + 1}
+                <Text style={{ lineHeight: 1.3 }}>{i + 1}</Text>
               </Col>
             );
           }
@@ -116,13 +115,11 @@ export const Stepper: React.FC<StepperProps> = (props) => {
           );
         })}
       </Row>
-      <Carousel hideDots current={current} width="100%">
-        {children.map((el) => el.props.children)}
-      </Carousel>
+      {children[current]}
     </>
   );
 };
 
-export const Step: React.FC<StepProps> = (props) => {
-  return <div>{props.children}</div>;
+export const Step: React.FC<StepProps> = () => {
+  return <div />;
 };

src/components/Tag/Tag.tsx

@@ -11,7 +11,11 @@ export const Tag: React.FC<TagProps> = (props) => {
   const { tag: tagCss, chipIcon, icon: iconCss } = style({ props, theme });
 
   return (
-    <span className={classes(tagCss, elevationCss(2))} onClick={(e) => props?.onClick(e)} style={props.style}>
+    <span
+      className={classes(tagCss, elevationCss(props.elevation))}
+      onClick={(e) => props?.onClick(e)}
+      style={props.style}
+    >
       {props.icon && <span className={iconCss}>{props.icon}</span>}
       <span>{props.children}</span>
       {props.chips && (
@@ -32,9 +36,11 @@ export interface TagProps {
   outline?: boolean;
   chips?: boolean;
   icon?: React.ReactNode;
+  elevation?: number;
 }
 
 Tag.defaultProps = {
   style: {},
   color: '#aaa',
+  elevation: 2,
 };

src/components/Tooltip/Tooltip.tsx

@@ -116,7 +116,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
   const [referenceElement, setReferenceElement] = useState<HTMLElement>(null);
   const [popperElement, setPopperElement] = useState<HTMLElement>(null);
   const [arrowElement, setArrowElement] = useState<HTMLElement>(null);
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+  const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {
     modifiers: [{ name: 'arrow', options: { element: arrowElement } }],
     placement,
   });
@@ -135,6 +135,7 @@ export const Tooltip: React.FC<TooltipProps> = (props) => {
   useEffect(() => {
     if (visible) {
       attachEvents(Array.isArray(trigger) ? trigger[0] : trigger);
+      forceUpdate?.();
       updateTooltipState(true);
     } else {
       onClose();